前端vue cli详解

01.vue-cli安装

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
安装命令：

npm install -g @vue/cli

查看是否安装成功

C:\Users\32008>vue --version
@vue/cli 4.5.13

02. vue-cli2

Vue CLI >= 3 和旧版使用了相同的 vue命令，所以 Vue CLI 2 的(vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你要全局安装一个桥接工具：

npm install -g @vue/cli-init 

2.1搭建项目

E:\前端codes\vueproject\vuecli2>vue init webpack cli2demo（项目名）

? Project name cli2demo
? Project description demo
? Author mhzzj
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

初始化项目参数说明

• project name：项目名字（默认）
• project description：项目描述
• author：作者（会默认拉去git的配置）
• vue build：vue构建时候使用的模式
  • runtime+compiler：大多数人使用的，可以编译template模板
  • runtime-only：比compiler模式要少6kb，并且效率更高，直接使用render函数（建议使用）
• install vue-router：是否安装vue路由
• user eslint to lint your code：是否使用ES规范
• set up unit tests：是否使用unit测试
• setup e2e tests with nightwatch：是否使用end 2 end，点到点自动化测试
• Should we run npm install for you after the project has been created? (recommended)：使用npm还是yarn管理工具

注意：如果创建工程时候选择了使用ESLint规范，又不想使用了，需要在config文件夹下的index.js文件中找到useEslint，并改成false。

useEslint: true,

启动：npm run dev
发布：npm run build
访问：http://localhost:8080

修改端口在config目录下的index.js文件修改

 // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 port: 8080, 

2.2vue-cli2主要目录

项目的目录结构 
├── build // 构建脚本
├── config // 全局配置 
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置

src 目录下各种文件
├── api // 各种接口 
├── assets // 图片等资源 
├── components // 各种公共组件，非公共组件在各自view下维护 
├── icons //svg icon 
├── router // 路由表 
├── store // 存储 
├── styles // 各种样式 
├── utils // 公共工具，非公共工具，在各自view下维护 
├── views // 各种layout(视图)
├── App.vue //***项目顶层组件*** 
├── main.js //***项目入口文件***
└── permission.js //认证入口

2.3其他文件

• .babelrc文件

• ​ .babelrc是ES代码相关转化配置。browsers表示需要适配的浏览器，份额大于1%，最后两个版本，不需要适配ie8及以下版本

• .editorconfig文件

• ​ .editorconfig是编码配置文件。一般是配置编码，代码缩进2空格，是否清除空格等。

• .eslintignore文件

• ​ .eslintignore文件忽略一些不规范的代码。

• .gitignore文件

• ​ .gitignore是git忽略文件，git提交忽略的文件。

• .postcssrc.js文件

• ​ css转化是配置的一些。

• index.html文件

• ​ index.html文件是使用html-webpack-plugin插件打包的index.html模板。

• package.json和package-lock.json

• ​ package.json(包管理,记录大概安装的版本)

• ​ package-lock.json(记录真实安装版本)

03.vue-cli3

3.1搭建项目

方案一：vue create

E:\前端codes\vueproject\vuecli3>vue create clidemo3
Vue CLI v4.5.13
? Please pick a preset:
> Default ([Vue 2] babel, eslint)  # 默认配置
  Default (Vue 3) ([Vue 3] babel, eslint)  # 默认配置
  Manually select features  # 自己选择

方案二：可视化界面

E:\前端codes\vueproject\vuecli3>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

打开可视化界面：http://localhost:8000/project/select

项目访问:http://localhost:8080/

3.2项目结构

3.3配置文件的查看与修改

方案一：通过vue ui图型化界面修改（可以安装依赖和插件）

方案二：新建vue.config.js文件

配置文件内容如下

module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // webpack-dev-server 相关配置
    devServer: {
      port: 8888,
    },//webpack配置
    lintOnSave:false,   //配置关闭eslint
    configureWebpack: {   
        //警告 webpack 的性能提示
        performance: {
          hints:'warning',
          //入口起点的最大体积
          maxEntrypointSize: 5000000000,
          //生成文件的最大体积
          maxAssetSize: 3000000000,
          //只给出 js 文件的性能提示
          assetFilter: function(assetFilename) {
            return assetFilename.endsWith('.js');
          }
        }
      }
  }

04.vue-admin-template（补充）

4.1简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
GitHub地址：https://github.com/yyhztzg2/vueAdmin-template-master

4.2安装

下载：git clone https://github.com/yyhztzg2/vueAdmin-template-master.

安装，进入目录vue-admin-template，执行npm install

运行：npm run dev

4.3目录结构（这里是之前使用的vuecli2）

项目的目录结构 
├── build // 构建脚本
├── config // 全局配置 
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置

src 目录下各种文件
├── api // 各种接口 
├── assets // 图片等资源 
├── components // 各种公共组件，非公共组件在各自view下维护 
├── icons //svg icon 
├── router // 路由表 
├── store // 存储 
├── styles // 各种样式 
├── utils // 公共工具，非公共工具，在各自view下维护 
├── views // 各种layout(视图)
├── App.vue //***项目顶层组件*** 
├── main.js //***项目入口文件***
└── permission.js //认证入口

4.4零散配置

1.修改端口：修改vue-admin-template-master\config\index.js文件

 host: 'localhost', // can be overwritten by process.env.HOST
 port: 9500, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

2.登录所在页面：vue-admin-template-master\src\views\login\index.vue