vue-cli初识

安装

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

你需要全局安装vue-cli工具：

1
2
3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

使用这个命令查看是否安装成功：

1	vue --version

创建一个项目

运行以下命令创建一个新项目：

1 2	vue create 你的项目名 #英文名（vue-cli规定项目名不能出现大写字母，可使用中划线）

命令执行后会提示选取预设：

推荐选择Manually select features，也就是手动选择预设。（上下箭头调整选中，回车确定选择）

回车后跳出很多选项，选择你项目中需要用到的工具。

Babel：你的项目是否需要做编译转化，如ES6转化为ES5语法以兼容低版本浏览器。
TypeScript：是否使用TS编码。
Progressive Web App (PWA) Support：是否支持webApp。
Router：是否需要路由。一般用来做单页应用需要用到，可做到无刷新页面跳转，交互友好。官网地址
Vuex：状态管理库。当你不知道它有什么作用时，说明你还不需要用到它。需要使用的可以进官网查看使用方法与场景，下面我也会简单介绍下vuex的简单用法。
CSS Pre-processors：是否需要使用css预处理器，比如：less,scss,stylus。
Linter / Formatter：调整ESLint的提示方式。
Unit Testing和E2E Testing：单元测试和E2E测试。很遗憾，楼主还没作深入了解，不作介绍。

PS：上下箭头移动选中光标，空格调整选中状态。回车进入下一步。

[^]: 楼主通常选择：Babel,Router,Vuex,CSS Pre-processors,Linter / Formatter。
- 若勾选Router会进入路由模式选择，请查看路由官网路由2种模式的区别再进行选择。
- 若勾选CSS Pre-processors会进入css预处理器选择，选择自己需要的就好了。
- 若勾选Linter / Formatter会进入选择ESLint的提示方式，通常我选择ESLint with error prevention only。其他没作了解。。。
- Pick additional lint features：Eslint校验的时机。保存就检测和fix和commit时检测
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：将配置信息保存在哪里。楼主一般是保存在package.json里。
- Save this as a preset for future projects?：是否将此选择保存到预设（下次可直接选择后不再进行以上配置）
- 最后确定后将进行必要依赖安装，安装即全部完成。

启动

安装完成后，根据命令窗口提示，将命令窗口切换到项目目录：

cd my-vue

启动项目：

1
2
3

yarn serve
#or
npm run serve

待命令执行完后，不出意外项目就启动好了。

根据命令窗口提示，在浏览器地址栏输入local的地址，你就可以访问你创建的项目了。就可以开始愉快的玩耍了。

远程仓库关联介绍

以码云为例（当然不是广告哈，我也希望是广告我还可以收点广告费呢），当然你可以使用其他git远程仓库服务。

创建新的远程仓库

填写必要信息：仓库名称（英文名，最好是和项目名称相同），仓库介绍：我觉得你应该必填，描述项目，不然项目多的你自己都不认得。

PS：使用Readme文件初始化这个仓库。最好是去掉勾选，保证仓库为空仓库（其他勾选也不要勾了）。不然关联vue-cli项目会产生一些不必要的问题。

将vue-cli项目和git远程仓库关联

远程仓库创建完成后会跳转到该项目的代码界面。没有文件的仓库应该是这个样子。

你可以设置自己的git全局设置。

然后使用已有仓库？下方的命令，当然若你的命令窗口已经在你的项目根目录后就不需要cd了。

vue-cli目录介绍

.git：为git工具文件，请不要手动修改它。
node_modules：webpack依赖包。请不要手动修改它。
public：里面的静态资源都不会经过webpack处理，当你的js或者css不需要经过webpack进行处理的时候可以直接放在这个文件夹。引用方式在index.html正常引用即可，当然最为安全的做法是类似favicon.ico文件的引用。<%= BASE_URL %>favicon.ico前面添加<%= BASE_URL %>
src：源代码目录
- assets：静态资源目录与public目录的区别是webpack会用各种处理器处理你引用过的资源，引用方式也不相同。下面我会接受assets里资源的引用。
- components：公共组件文件夹
- views：页面组件文件夹。你需要把所有的页面都理解成一个组件，所有的页面都是通过各种组件组成一个大的组件。
- App.vue：根组件。
- main.js：入口js
- router.js：路由js
- store.js：vuex相关
.gitignore：git忽略配置文件。
babel.config.js：babel配置文件。
package.json：依赖包列表。以及上方如果你选择将eslint及其他配置保存在这个里面，那你就应该在这个文件里配置相关的一些配置。
README.md：介绍文件，可以写一些项目描述啥的，可以和项目脱离。
vue.config.js：vue-cli中的webpack配置可以在里面设置。如果没有可自行建立。
yarn.lock：自动生成。和package-lock.json作用类似。请不要手动修改它。

开始开发

main.js入口文件介绍

当然你可以引入在这里引入额外的js或者全局css

静态资源引入方式介绍

import "@/assets/js/index.js";
import "@/assets/css/main.less";
//	如果你的css文件是less或者其他问题，可以直接引入，webpack会自动帮你编译。
//	当然前提是你在安装时的配置是否选择有当前的css预处理器。
//	JS引入后是直接执行的。

@符代表这src目录，而且我推荐你使用@符来书写路径，你甚至可以将上面的App.vue和router的路径都用@来表示。

组件介绍

对，最开始接触vue-cli的时候我也有这个疑问，.vue文件到底是个什么东西。

它就是个组件。你可以抽象的把它认为是一个div，你可以随意的把它放到任意地方。当然放置的方式可能和div放置有点区别。比如App.vue这个组件，是在main.js里引入，然后挂着到public/index.html的#app处，你可以理解成App.vue是用来替换这个public/index.html中div#app的。

import App from './App.vue'
// 组件引用
render:h=>h(App)
/*
组件挂载，内部运行方式可以理解成vue初始化时调用render执行
将组件App渲染到$mount('#app')。div#app
*/

组件结构介绍

组件包含（必须，省略这个的话组件好像没有意义了吧）

<template>
	<div>
    </div>
</template>
<!--可编写组件dom结构。需要注意的是整个组件需要且只有一个根元素
你所需要的其他结构应该都写在根元素内部。-->

可包含js（不必须）

<script>
    //export default为导出此组件，在别的地方你可以进行import引入，引入后就可以愉快的使用啦
    export default {
        name:'home',//组件名称。推荐和组件名保持一致。可不写，但是推荐写，因为有些场景可能用到，我会在另一篇博客中说明。
        data(){
            return {
                //该组件的data。组件data和vue实例data的写法有区别，组件data是一个方法将数据return出来。
            }
        },
        methods:{
            //该组件的方法，可在生命周期里进行调用，或者在template里进行调用都可以。
        },
        mounted(){
            //生命周期钩子，可进行合适的时间执行想要执行的方法。必须深入了解各生命周期钩子的作用，才能更加熟练的进行vue开发
        },
        components:{
            //组件，需要导入组件才能使用组件，你可以在src目录的各个地方编写组件，就是现在介绍的这个样子，一样。
            //vue-cli初始化的src/views/Home.vue中有例子，首先在export default上方导入组件，然后在components载入，最后在template中使用，使用写法和div标签一致，它可以为单标签也可以为双标签，使用双标签可使用vue插槽功能。
            
        }
        //等等
        //PS:请看清楚各个部件是方法还是对象。
    }
</script>

可包含css（不必须）

<style lang="less" scoped>
	/*
    *lang：规定你编写css的方式，需要在安装时选择对应的css预处理器
    *scoped：局部样式，如果你需要该样式只作用在此组件可加上scoped。
    如加上scoped后的div选择器，不会污染其他组件样式。
    */
</style>

路由介绍

路由关系编写在router.js。

怎么理解路由这个概念呢，很简单：将匹配到的路由路径进行路由入口的组件替换。要是还不理解的话我下面还会讲到。

router.js：

import Vue from 'vue'
// 引入vue-router
import Router from 'vue-router'
// 引入组件
import Home from './views/Home.vue'
// 将路由挂载到vue
Vue.use(Router)
// 导出路由配置
export default new Router({
  // mode: 'history',//路由模式，可进路由官网查看模式介绍
  base: process.env.BASE_URL,//应用的基路径，对摘的官网的说明，反正我也不修改它，也不建议你修改它，也没必要。
  routes: [
    {
      path: '/',//路由路径，当匹配到此路径时，会将下方组件插入到路由入口，待会会介绍路由入口。可作跳转使用。
      name: 'home',//路由名称，极度建议编写name，可作跳转使用，而且非常推荐使用name跳转，而不是路径跳转。理由是一旦你觉得你的路径不好看你可以直接修改路径而不需要担心你的跳转逻辑出现问题。
      component: Home//组件挂载，当匹配到路由路径时使用该组件插入到路由入口
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')//也是组件挂载，和Home不同的编写方式：此写法为异步组件加载，当路由没有匹配到的时候不继续组件资源的请求。webpackChunkName可进行各组件分块打包，相同名称的组件会打包成为一个js文件。两种方式各有优缺点。
    }
  ]
})

让我们回到App.vue看根组件的内容:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

为路由入口。

router-link在这里作为跳转按钮，to=”/“跳转到的路径为router.js中Home.vue组件的路由路径。当你点击Home时，会将Home.vue组件的内容替换到路由入口处。同理当你点击About时，会将About.vue组件替换到路由入口处。如果你足够细心你可以在浏览器控制台Network中发现在第一次点击about路由时，会加载about.js这个文件，当然这个文件只会加载一次。所以异步加载路由的方式可以为应用节省首屏资源加载的成本。而不进行异步加载的路由在首屏加载完成后在后期路由切换中更为流畅（当然只在第一次点击路由时有差别，因为异步加载的组件也只需请求一次）。