Vue CLI 3.x搭建Vue项目

使用vue-cli3.x脚手架搭建一个vue项目,以及目录结构分析。

一、Node安装

 windows
 1. Node.js (>=8.9, 推荐8.11.0+)
  Node官网下载 .msi 文件,按步骤下载安装即可。
  安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功。
 2. Git(命令行终端)
  Git官网下载安装即可。

 linux

apt-get install nodejs
node -v
apt-get install npm
npm -v

 npm命令
 1. 得到原本的镜像地址

npm get registry

 2. 设成淘宝的

npm config set registry http://registry.npm.taobao.org/

 3. 换成原来的

npm config set registry https://registry.npmjs.org/

二、vue-cli安装、更新

  如果全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步。

npm uninstall vue-cli -g

  操作如下:
uninstall_vue_cli2.x.png
  可以看到我之前的版本是2.9.6,卸载成功后,vue命令便不存在了。
  ps:如果有npm WARN警告,可能是coffee-script的某个依赖包改名了(coffee-script本身已经淘汰了)。

  下面开始全局安装 @vue/cli(Vue CLI 3的包名称由vue-cli改成了@vue/cli):

npm install -g @vue/cli

  更新:

npm update @vue/cli

  查看安装成功否(有版本号就是成功,V大写)

vue -V

三、vue-cli搭建vue项目

  执行如下命令即可(注意该命令跟vue-cli2.x不同)。

vue create <Project Name>  // 文件名 不支持驼峰(含大写字母)

  但如果是在windows环境下直接使用 Git Bash,交互提示符并不工作,必须通过如下命令来创建项目:

winpty vue.cmd create my-project

  具体操作如下:
  首先,会提示你选择一个preset(预设):
  如果之前配置保存过,那么有preset-config选项,可以直接用。
  如果没有配置保存过,则只有两个选项:
  default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包。
  Manually select features:手动配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的npm包。
vue_cli3x_create_preset.png
  我们选择手动配置,根据你需要用方向键选择(按“空格键”选择/取消选择,A键全选/取消全选)对应功能。
  为了方便稍后跟用vue-cli2.x创建的项目结构作对比,我们这边仅添加Router而不添加Vuex。
vue_cli3x_create_features.png
  简介:

? Check the features needed for your project:
>( ) 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) 测试

  选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的(方便遇到问题时百度),简介如下:

  ① 是否使用history router:
vue_cli3x_create_router.png
  Vue-Router利用了浏览器自身的hash模式history模式的特性来实现前端路由(通过调用浏览器提供的接口)。
  详情见Vue Router - HTML5 History 模式

  ② css预处理器
vue_cli3x_create_css.png
  主要为css解决浏览器兼容、简化css代码等问题(Sass诞生于2007年,最早也是最成熟的一款css预处理器语言)。

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS  // Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)
  LESS       // Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
  Stylus     // Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。

  ③ ESLint
  提供一个插件化的javascript代码检测工具。

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier         // 使用较多

  ④ 何时检测

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就检测
 ( ) Lint and fix on commit          // fix和commit时候检查

  ⑤ 单元测试

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

  ⑥ 如何存放配置
vue_cli3x_create_config.png

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  // 独立文件放置
  In package.json            // 放package.json里

  ⑦ 是否保存本次配置(之后可以直接使用)

? Save this as a preset for future projects? (Y/n)  // y:记录本次配置,然后需要你起个名; n:不记录本次配置

  搭建完成后,依次执行 cd my-projectnpm run serve 即可访问vue默认的demo页面。
vue_cli3x_helloworld_page.png

四、与vue-cli2.x区别

  使用 vue-cli3.x 脚手架工具创建vue项目后,项目结构与2.x的对比如下:(不同的预设包含不同的文件,大致结构一致)
vue_cli3x_vs_vue_cli2x.png
  不难看出,vue-cli3.x十分精简,主要的大的区别如下:

1. vuex(状态管理)

  vue cli 2 中 :vuex是搭建完成后自己npm install的,并不包括在搭建过程中。可以看到vue cli 2的vuex默认文件夹(store)又包含了三个js文件:action(存放一些调用外部API接口的异步执行的的方法,然后commit mutations改变mutations 数据)、index(初始化mutations 数据,是store的出口)、mutations(处理数据逻辑的同步执行的方法的集合,Vuex中store数据改变的唯一方法commit mutations)

  vue cli 3 中:vuex是包含在搭建过程供选择的预设。vue cli 3 中默认只用一个store.js代替了原来的store文件夹中的三个js文件。action、mutations、state以及store 的 getters 的用法有很多,举常用的例子:
  eg:store.js

import Vue from 'vue';
import Vuex from 'vuex';  // 引入 vuex
import store from './store'  // 注册store

Vue.use(Vuex);  // 使用 vuex

export default new Vuex.Store({
    state: {
        // 初始化状态
        count: 0
    },
    mutations: {
        // 处理状态
        increment(state, payload) {
            state.count += payload.step || 1;
        }
    },
    actions: {
        // 提交改变后的状态
        increment(context, param) {
            context.state.count += param.step;
            context.commit('increment', context.state.count)  // 提交改变后的state.count值
        },
        incrementStep({state, commit, rootState}) {
            if (rootState.count < 100) {
                store.dispatch('increment', {  // 调用increment()方法
                    step: 10
                })
            }
        }
    }
})

  使用时,
  eg:main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'  // 引入状态管理 store

Vue.config.productionTip = false

new Vue({
  router,
  store,  // 注册store(这可以把 store 的实例注入所有的子组件)
  render: h => h(App)
}).$mount('#app')

  views/home.vue

<template>
    <div class="home">
      <!--在前端HTML页面中使用 count-->
        <HelloWorld :msg="count"/>
    </div>
</template>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    import {mapActions, mapState} from 'vuex'  // 注册 action 和 state

    export default {
        name: 'home',
        computed: {
            // 在这里映射 store.state.count,使用方法和 computed 里的其他属性一样
            ...mapState([
                'count' 
            ]),
        },
        created() {
            this.incrementStep();
        },
        methods: {
            // 在这里引入 action 里的方法,使用方法和 methods 里的其他方法一样
            ...mapActions([
                'incrementStep'
            ]),
        },
        components: {
            HelloWorld
        }
    }
</script>

2. router(路由)

  vue cli 2:“ router/index.js ”
  vue cli 3:“router.js”(用法和做的事都一样)

3. 去掉static、新增public文件夹

  vue cli 2:static 是 webpack 默认存放静态资源的文件夹,打包时会直接复制一份到dist文件夹不会经过 webpack 编译。
  vue cli 3:摒弃 static 新增了 public。vue cli 3 中“静态资源”两种处理方式:
  • 经webpack 处理:在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩;
  • 不经webpack 处理:放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份,不做任何编译压缩处理。

4. index.html

  vue cli 2:“index.html”
  vue cli 3:“public/index.html”此模板会被 html-webpack-plugin 处理的

5. src/views

  vue cli 3 的src文件夹新增views文件夹用来存放“页面”,区分components(组件)。

6. 去掉build和config两个文件夹

  vue cli 3 中,去掉了 build(根据config中的配置来定义规则)、config(配置不同环境的参数)文件夹。
  这些配置你可以通过命令行参数、或 vue.config.js (在根目录新建一个 vue.config.js 同名文件)里的 devServer 字段配置开发服务器。

7. babel.config.js

  配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrcpackage.json 中的 babel 字段不同,这个配置文件不会使用基于文件位置的方案,而是会一致地运用到项目根目录以下的所有文件,包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

8. 根目录的一些其他文件的改变

  之前所有的配置文件都在 vue create 搭建时preset预设,或者后期可以通过命令参数、vue.config.js中配置。
  根据需要在根目录下新建 vue.config.js 自行配置,下面只列一部分,具体配置参考官方文档

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
  baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",

  // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
  outputDir: "dist",
  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
  assetsDir: "assets",
  // 指定生成的 index.html 的输出路径  (打包之后,改变系统默认的index.html的文件名)
  // indexPath: "myIndex.html",
  // 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
  filenameHashing: false,

  // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
  lintOnSave: true,
  // 如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
  // lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
  // runtimeCompiler: false,

  /**
   * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
   *  打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
   *  map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
   *  有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
   * */
  productionSourceMap: false,

  // 它支持webPack-dev-server的所有选项
  devServer: {
    host: "localhost",
    port: 1111,  // 端口号
    https: false,  // https:{type:Boolean}
    open: true,  // 配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

    // 配置多个代理
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "<other_url>"
      }
    }
  }
};

五、图形化界面创建项目

  vue-cli 3x 新增了通过图形化界面创建项目的功能,
  在命令行输入命令:

vue ui

  然后会自动打浏览器页面,选择创建,后面基本上都是“下一步、下一步”的无脑操作。

六、vue-cli 2x(旧版本)

  了解 vue-cli 2x(旧版本):参见本人另一篇博客《Vue CLI 2.x搭建Vue项目》


参考
https://cli.vuejs.org/zh/guide/


  目录