Vue基础复习(8)Vue-Cli 3.X脚手架构建项目

vue2.X Vue-Cli 3.x脚手架构建项目

1. 安装：

2. 基于Vue-Cli创建项目

3. Eslint插件

4. 自定义语法规则

---

vue2.X Vue-Cli 3.x脚手架构建项目

VUE-CLI文档：介绍 | Vue CLI

1. 安装：

全局安装： npm install -g @vue/cli；查看当前版本号：vue -V

 问题：

  

版本更新：安装5.0.1版本 npm install -g @vue/cli@5.0.1

2. 基于Vue-Cli创建项目

(1) 创建默认项目

命令：vue create 项目名称 // vue create vue-demo1

进入cd vue demo1 并运行npm run demo1即可进入

(2) 创建自定义项目

命令：vue create 项目名称 // vue create vue-demo2

选择Manually select features自定义创建项目

进入cd vue demo2 并运行npm run demo2即可进入

node_modules:存放各种依赖各种插件的文件夹

Public:存放打包之后不会变动的文件，后续原封不动的放入dist文件中

index.html:主页面

src文件：

        i) assets存放文件中的静态资源css/img等

        ii)components存放公共组件

router:配置路由地址

views:存放跟路由相关的组件

App.vue:存放根目录跟组件

main.js:整个程序的入口文件

.browserslistrc:浏览器兼容的范围

.eslintrc.js:.eslintrc的相关配置，会进行修改

package-lock.json:当前配置及包的来源

vue.config.js:自定义配置,信息文档https://cli.vuejs.org/zh/config/#vue-config-js

module.exports = {

  devServer:{

    port:8001,//端口号

    open:true,//服务器启动之后自动打开浏览器

    https:false,//不适用https协议

    hoost:"localhost",//主机名

  },

  lintOnSave:true,//关闭代码的格式检错

  outputDir:'dist2',//默认dist

  assetsDir:"assets",//指定存放静态资源的位置

  indexPath:'out/index.html',//指定index.html的位置

  productionSourceMap:false,//指定是否生成map文件

}

3. Eslint插件

在项目根目录下的 package.json 文件中有 eslintConfig 选项中配置, 或者 .eslintrc.js 配置

4. 自定义语法规则

Eslint官方规则:List of available rules - ESLint中文

Vue Github文档：:Vue Github

语法规则写在 package.json 或 .eslintrc.js 文件中 rules 选项中.