Vue基础复习(8)Vue-Cli 3.X脚手架构建项目_vue-cli5.0.8创建的文件报错

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 选项中.