15-Vue-CLI4基本使用

image

一、什么是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

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

image

三、通过脚手架创建项目

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

vue create project-name(项目名称)

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

image

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

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

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

2. 默认配置（default）

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

image

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

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

image

3.1 选择你需要的配置项

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

image

每个配置项的解释：

( ) 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

image

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

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

3.22 选择css 预处理器

image

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

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

3.23 选择Eslint代码验证规则

image

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

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

image

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

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

3.25 选择单元测试

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

image

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

3.26 选择如何存放配置

image

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

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

image

3.27 是否保存当前配置

image

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

3.3 等待创建项目

项目创建成功：

image

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

image

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

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

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

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

image

在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. 把创建项目自动添加的文件删除

image

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

image

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

image

3. 创建Vue实例

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

• 在webstorm中安装Vue.js插件

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

image

• 配置File Types

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

image

• 在scr目录创建App.vue的文件

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

image

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

• 在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

image

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

image

5. 使用npm run serve编译

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

image

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

image

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

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

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

• 在template中使用数据和方法

7. 给组件添加样式

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

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

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

• 在父组件中导入子组件

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

• 在父组件中注册子组件

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

• 在父组件中使用子组件

9. 组件中的style

• 如果style标签不加scoped, 那么设置的就是全局样式

  尽管App.vue中没有设置p标签的样式，因为在子组件中的style标签没有加scoped，所以App.vue当中的p标签也会被设置为蓝色

One.vue

App.vue

• 所以，如果你想当前的样式只对当前的组件有效，就不要去改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组件中获取共享数据

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

  
methods: {
    ...
    getStr () {
      console.log(this.$store.state.str)
    }
},

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

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

  
methods: {
    ...
    getStr () {
      console.log(this.$store.state.str)
    }
},

11. 在Vue-CLI中使用Vue Router

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

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

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

    跳转的第一个子组件
    跳转的第二个子组件
    

五、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'
      })
    ]
  }
}