vue/cli4教程

1. 安装vue/cli4

npm install -g @vue/cli

• 安装之后会暴露vue命令,可以运行 vue --version检查是否安装正确

vue --version
@vue/cli 4.3.1

2. 使用vue/cli4创建项目

1. 运行命令vue create 项目名称
   • 项目名称中不要有大写字母
   • 不要使用 Git Bash执行此命令，如果执意，请点击
2. 当你输入项目名称之后，回车会出现以下命令
   

• 他的意思是让你选择使用默认配置default (babel, eslint)还是自己配置Manually select features
• 在这里我们选择自己配置(移动上下箭头+回车 进行选择)

3. 当你回车之后，会出现以下命令
   

• 使用空格键进行选择，上下键进行光标的移动，使用a进行全选，选完之后，按回车进行确认
• 我的选择为
  
• 其中PWA指的是渐进式web应用，暂且先不选择，以后会写一篇博客专门介绍他。CSS Pre-processors指的是css预处理器，当我们回车选择之后会对于处理器进行选择

4. 当你回车之后会跳出另一个选择框
   

• 这里是让你选择路由的模式，如果选择Y的话，选择的是historey模式，路径中有#,这个兼容性较好

5. 当你回车选择之后，会跳出如下的命令选择
   

• 选择css预处理器，这里我选择less

6. 当你回车选择的时候，会出现下面的选择框
   

• 对于ESLINT的选择，个人比较喜欢ESLint + Prettier,选择之后然后回车

7. 然后又会跳出来一个命令的选择
   

• 他是询问你在什么时候进行代码的检验
  • Lint on save保存的时候进行检验
  • Lint and fix on commit提交的时候进行检验
• 一般都会选择第一个

8. 回车之后他又会跳出一个选项
   

• 这里是询问的是将上面进行的配置保存在那个地方
  • In dedicated config files是放在独立的文件夹中
  • In package.json保存在package.json中
  • 我们一般都会保存在package.json中

9. 回车之后，他又会跳出一个选项
   

• 他的意思是要不要把我们的项目配置永久的保存下来，以后再新建项目的饿时候就不必在进行配置了
• 一般都会选择no,因为这种配置并不消耗我们的时间
• 然后回车，项目创建完毕

使用图形化界面创建项目

vue ui

• 会打开图形化的界面，进行创建项目
• 不过我们用的命令行多一些，毕竟快

3. 项目说明

3.1 项目目录说明

项目目录

• dist:用于存放我们 使用 npm run build 命令打包的项目文件
• node_modules:用于存放我们项目的各种依赖，比如axios等等，没有moudles文件，项目就没法运行，可以使用 npm install进行项目依赖的安装
• public:用于存放静态文
• public/index.html:是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
• src:我们存放各种vue文件的地方
• src/assets:用于存放各种静态文件，如图片
• src/compnents：用于存放我们的公共组件，如 header、footer等
• src/views：用于存放我们写好的各种页面，如login、main等
• src/App.vue:主vue模块 引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
• src/main.js:入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
• src/router.js:路由文件，这个里边可以理解为各个页面的地址路径，用于我们访问，同时可以直接在里边编写路由守卫
• src/store.js：主要用于项目里边的一些状态的保存，state中保存状态，mutations中写用于修改state中的状态，actions暂时没实践，不知道具体怎么使用
• package.json:模块基本信息项目开发所需要模块，版本，项目名称
• package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
• babel.config.js:是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
• gitignore:git上传需要忽略的文件格式
• vue.config.js:保存vue配置的文件，可以用于设置代理,打包配置等

3.2 项目前的准备

• 可以不删除任何文件，用的时候去修改文件就可以了

4.前端配置代理服务器

1. 新建vue.config.js

• 相对简单的代理方式

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

• 比较详细的代理方式

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

devServer的其他配置

• open是否自动打开浏览器，后面跟布尔值
• 详情 点击

5.webpack配置

• 详情点击

5.1 configureWebpack

可以跟一个对象

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

也可以跟一个函数

• 基于环境有条件地配置行为，或者想要直接修改配置

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

5.2 chainWebpack

• 操作loader和插件等配置
• 链式调用

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}