一、什么是Vue-CLI

Vue-CLI (Command Line Interface) 是vue官方提供的脚手架工具,
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

作用：能够帮我们快速搭建一个webpack管理的项目结构。
因为使用webpack搭建项目是比较繁琐的，Vue为了简化这一操作，于是开发出了Vue-CLI。通过vue-cli我们就可以直接使用webpack。

二、安装Vue-CLI

可以使用下列任一命令安装：

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

安装之后，可以用这个命令来检查是否安装成功及其版本是否正确：

vue --version

安装成功后是这样的，版本号有可能不一样：

三、通过脚手架创建项目

1. 在命令行进入一个目录，运行以下命令来创建一个新项目：

vue create project-name(项目名称)

运行命令后会弹出一个窗口：

default 是使用默认配置，默认安装及自动配置babel，eslint

Manually select features 是自定义配置，需要我们手动配置，可以自己选择需要配置什么东西

我们先来使用默认配置创建--当前状态敲回车即可

2. 默认配置（default）

选中default并敲回车，显示如下信息就表示配置成功了

3. 自定义配置（Manually select features）

通过键盘上的↓方向键选中Manually select features并敲回车，会显示如下配置项

3.1 选择你需要的配置项

通过↑ ↓ 箭头选择你要配置的项，按空格是选中，按 a 是全选，按 i 是反选。
这是我的项目配置：

每个配置项的解释：

( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，
    需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

3.2 选完之后按 Enter。分别选择每个对应功能的具体包。

3.21 选择是否使用history router

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选yes的话需要服务器那边再进行设置。
Use history mode for router? (Requires proper server setup for index fallback in production)

3.22 选择css 预处理器

我选择的是Sass/Scss(with dart-sass)

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。而且Sass/Scss性能会更好,会更快一些。

3.23 选择Eslint代码验证规则

提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多。我这里先选择ESLint + Standard config（标准规范）。

3.24 选择什么时候进行代码规则检测

( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查

建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。也可以两个都选上。

3.25 选择单元测试

我的项目中并没有选择单元测试，但是如果选择了的话会有一下内容

Mocha + Chai    mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成，必须在全局环境中安装
Jest            安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，
                相较于Mocha: 配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

3.26 选择如何存放配置

In dedicated config files   独立文件放置
In package.json             放package.json里

选择In dedicated config files放到单独的文件中，便于后续管理
如果是选择独立文件放置，项目会有单独如下图所示的几件文件。

3.27 是否保存当前配置

键入N不记录，如果键入Y需要输入保存名字。如果保存的话下一次就不需要一步一步地从头开始配置.

3.3 等待创建项目

项目创建成功：

3.4 执行它给出的命令，可以直接访问了

npm run serve是通过dev-serve打包的，会打包到内存中，所以在项目结构中是看不到打包后的文件夹的。
如果想打包到磁盘上可以通过npm run build指令打包，打包后会生成一个dist目录

到这里我们的项目就已搭建完成啦~~

3.5 通过Vue-CLI生成的项目结构解读

配置成功后，我们的项目目录下就会多出一个my-project2(这是我的项目名称)文件夹，打开这个文件夹，我们就可以看到这个项目的结构.我这里隐藏了node_modules文件夹.

在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹，这些配置文件都被放在了node_modules@vue文件下
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue

node_modules文件夹: 存储了依赖的相关的包
public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，
              而不经过 webpack。你需要通过绝对路径来引用它们
              一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
src文件夹: 代码文件夹
 |----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
 |----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
 |----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
 |----router文件夹: 存储VueRouter相关文件
 |----store文件夹: 存储Vuex相关文件
 |----App.vue:根组件
 |----main.js:入口js文件

四、通过Vue-CLI开发项目

1. 把创建项目自动添加的文件删除

2. 在public目录下新建一个index.html文件

还需要指定Vue实例的控制区域

3. 创建Vue实例

3.1 在src目录下创建一个App.vue的根组件

在webstorm中安装Vue.js插件
File->Settings->Plugins->选中Marketplace并搜索Vue，如图就是第一个Vue.js插件, 然后安装即可。安装后还需要重启webstorm.

配置File Types
File->Settings->Editor->File Types->往下划找到Vue.js Template->选中它并点击右边的 + 号, 输入*.vueOK即可

在scr目录创建App.vue的文件
在src目录右键new一个文件的时候就可以看到有一个Vue Component啦
选中它输入App即可创建APP.vue的文件

创建成功后会自动生成模板

<!--template用于编写当前组件的结构代码的-->
<template>

</template>

<!--script用于编写当前组件的业务代码-->
<script>
    export default {
        name: "App"
    }
</script>

<!--style用于编写当前组件的样式代码的-->
<style scoped>

</style>

在template中写根组件结构代码

<template>
  <div id="app">Vue-CLI创建的第一个项目</div>
</template>

3.2 在src目录下新建一个main.js的文件

导入Vue和App根组件并使用render函数渲染

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

4. 在webstorm中指定eslint规则

在webstorm的settings中搜索eslint,选中第三个, 在ESlint package中找到你当前项目的eslint

这样做的好处是可以在编辑代码的时候可以自动报错, 并且可以通过鼠标右键中找到一个Fix ESLint Problems，帮助我们自动修复代码

5. 使用npm run serve编译

在当前项目下的命令行输入指令npm run serve

点击其中一个链接，就可以在浏览器看到我们的项目了

6. 给组件添加数据和方法

在default对象中编写组件中的数据和方法

export default {
  name: 'App',
  data: function () {
    return {
      msg: 'App组件中的数据'
    }
  },
  methods: {
    myFn () {
      console.log('App组件中的方法')
    }
  }
}

在template中使用数据和方法

<template>
  <div id="app">
    <p>{{msg}}</p>
    <button @click="myFn">我是按钮</button>
  </div>
</template>

7. 给组件添加样式

在style标签中编写当前组件的样式

<style scoped>
p{
  background: red;
}
</style>

8. 在当前组件中添加子组件

在components目录下新建一个One.vue的组件，并在这个组件中编写结构、逻辑、样式代码

<template>
  <div>
    <p>我是第一个子组件</p>
  </div>
</template>

<script>
export default {
  name: 'One'
}
</script>

<style scoped>

</style>

在父组件中导入子组件

import One from './components/One.vue'

在父组件中注册子组件

export default {
  // ...
  components: {
    One: One
  }
}

在父组件中使用子组件

<template>
  <div id="app">
    ...
    <One></One>
  </div>
</template>

9. 组件中的style

如果style标签不加scoped, 那么设置的就是全局样式
尽管App.vue中没有设置p标签的样式，因为在子组件中的style标签没有加scoped，所以App.vue当中的p标签也会被设置为蓝色

One.vue

<style>
p{
  background: skyblue;
}
</style>

App.vue

<style scoped>

</style>

所以，如果你想当前的样式只对当前的组件有效，就不要去改style标签的scoped，让它保持默认即可

10. 在Vue-CLI中使用Vuex

10.1 在src的store目录下新建一个index.js的文件

10.2 导入Vue和Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

10.2 创建Vuex对象

const store = new Vuex.Store({
  state: {
    str: 'Vuex中的共享数据'
  }
})

10.4 将Vuex对象暴露出去

export default store

10.5 注册Vuex

在入口文件main.js中，导入store

import store from './store/index.js'

在Vue实例中添加store

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

10.6 获取共享数据

在App.vue组件中获取共享数据

<div id="app">
...
<button @click="getStr">App.vue组件中获取共享数据</button>
</div>
  
methods: {
    ...
    getStr () {
      console.log(this.$store.state.str)
    }
},

在One.vue组件中获取共享数据

<div id="app">
...
<button @click="getStr">One.vue组件中获取共享数据</button>
</div>
  
methods: {
    ...
    getStr () {
      console.log(this.$store.state.str)
    }
},

11. 在Vue-CLI中使用Vue Router

11.1 在components目录下新建一个Two.vue的组件

并添加一些内容, 方便我们待会区分子组件

<template>
    <div>
      <p>我是第二个子组件</p>
    </div>
</template>

11.2 在router文件夹下新建一个index.js的文件

11.3 在index.js文件中导入Vue和Vue Router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

11.4 定义Vue Router规则

导入组件

import One from '../components/One.vue'
import Two from '../components/Two.vue'

定义规则

const routes = [
  { path: '/one', componment: One },
  { path: '/two', componment: Two }
]

11.5 根据规则创建router对象

const router = new VueRouter({
  routes
})

11.6 将创建好的router对象暴露出去

export default router

11.7 在入口文件main.js中导入router，并绑定到Vue实例上

import router from './router/index.js'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

11.8 修改路由地址，指定路由出口

App.vue

<div id="app">
    <router-link to="/one">跳转的第一个子组件</router-link>
    <router-link to="/two">跳转的第二个子组件</router-link>
    <router-view></router-view>
</div>

五、Vue-CLI修改webpack配置

如何配置Vue-CLI创建项目的webpack配置

默认情况下通过Vue-CLI创建的项目已经自动给我们配置好了webpack
但是有时候默认的配置可能不能满足我们的需求, 例如我们想修改输出目录名称, 想增加一些插件等
但是Vue-CLI创建的项目里又没有webpack配置文件, 那么我们应该如何修改或增加webpack配置呢?

我们可以通过新建vue.config.js的方式来修改配置
我们可以通过在vue.config.js中的configureWebpack属性来新增webpack配置
具体步骤如下：

1. 在项目目录下新建一个`vue.config.js`文件

2. 查询Vue-CLI的封装是否能够满足我们的需求

配置参考
查询Vue-CLI的封装的属性是否能够满足我们的需求
如果可以满足我们的需求, 那么就使用Vue-CLI封装的属性来修改webpack的配置
例如：我现在想要修改打包出口目录，查阅Vue-CLI的配置找到了一个outputDir属性，那么我就可以直接使用这个属性

module.exports = {
  outputDir: 'bundle'
}

3. 如果不可以满足我们的需求, 那么我们可以通过`configureWebpack`的属性来编写原生的webpack配置

例如：我想增加一个添加版权的插件

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.BannerPlugin({
        banner: '知播渔教育-www.it666.com'
      })
    ]
  }
}