Vue --- 使用vue-cli搭建SPA项目-CFANZ编程社区

1. 什么是vue-cli?

2. 安装vue-cli

3. 使用脚手架vue-cli(2.X版)来构建项目

4. package.json详解

5. npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的区别

6. vue项目结构说明

7. 什么是*.vue文件

8. 综合案例

目标：使用vue-cli来搭建vue项目

测试：（有版本就说明搭建成功，注：用管理员身份打开cmd）

在node_global目录下生成webpack文件（有就成功）

注1：安装成功后，会出现如下文件
根据自己安装的目录来操作 ==> node-v16.14.2-win-x64 ==> node_global ==>
vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd

注2：安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

代码案例：

--------------UserInfo.js-------------
<template>
  <div>
    <div>
      <h1>用户中心</h1>
      <router-link to="/Logout">注销</router-link>
      <router-link to="/Update">修改密码</router-link>
    </div>
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default{
    name:'UserInfo',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>


--------------About.js----------------
<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script>
  export default{
    name:'About',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>


--------------index.js----------------
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'

import UserInfo from '@/components/UserInfo'
import About from '@/components/About'

import Logout from '@/components/Logout'
import Update from '@/components/Update'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path:'/',
      name:'Home',
      component:Home,
      children:[
        {
          path:'/UserInfo',
          name:'UserInfo',
          component:UserInfo,
          children:[
            {
              path:'/Logout',
              name:'Logout',
              component:Logout
            },{
              path:'/Update',
              name:'Update',
              component:Update
            }
          ]
        },{
          path:'/About',
          name:'About',
          component:About
        }
      ]
    }
  ]
})


--------------Home.js----------------
<template>
  <!-- 有且只有一个根节点 -->
  <div>
    <h1>{{ts}} - {{msg}}</h1>
    <div>
      <router-link to="/UserInfo">个人中心</router-link>
      <router-link to="/About">关于我们</router-link>
    </div>
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default{
    name:'Home',
    data:function(){//在自定义组件中必须使用函数方式
      return{
        ts:new Date().getTime(),
        msg:'hello Vue!!!'
      }
    },
    methods:{
      
    }
  }
</script>

<style>
</style>

效果图：

附录一：vue中import引入模块路径中@符号是什么意思？
例如：import model from "@/common/model"，这里路径前面的“@”符号表示什么意思？
答案：@等价于/src这个目录，避免写麻烦又易错的相对路径（根路径）|（.是当前路径）
这个是webpack使用loader里配置的
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 默认路径代理
// 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
alias: {
'@': resolve('src'),
'@config': resolve('config'),
'vue$': 'vue/dist/vue.common.js'
}
}