vue-webpack配置及创建项目

&、准备vue-webpack项目的流程

1、node npm的安装

2、webpack全局安装 npm instal webpack @版本 -g 如webpack install [email protected] -g   -g指的全局

3、创建webpack项目的package.json及pack-lock.json，指令为npm init

4、cd至开发目录，安装本地对应的开发依赖 npm install webpack@版本 --save -dev   --save -dev指的是开发依赖

5、本地安装vue 指令 npm install vue --save(之后在本地文件中可以import Vue from 'vue',ES6规范)

6、让开发文件识别vue文件 指令 npm install --save -dev vue-loader vue-template-compiler

7、全局安装vue-cli(command-line) 指令npm install @vue/cli -g

8、默认会安装最新版本 如果包容vueclie2项目 指令 npm install @vue/cli -init -g

9、cli2项目创建指令：vue init webpack 项目名

　 cli3项目创建指令：vue create 项目名

10、安装过程的问题解决

　　清理npm-cach 文件夹在C:\Users\Administrator\AppData\Roaming\npm-cache 或者指令 npm clean cache -force,注意有时候需要用管理员身份运行cmd

&、vuecli创建后项目的配置

1、配置文件夹有2个，build和config，build主要为各类运行，调试，基础配置；config主要为设置变量等配置

(1)设置自动打开浏览器：config文件夹中index.js文件中autoOpenBrowser: false,//是否自动打开浏览器，可设置为true

2、static文件夹，静态资源文件夹，在打包时候会原封不动的进行打包

3、babelrc文件，浏览器适配设置

4、editorconfig文件，对代码进行统一、约束，比如缩紧2个字符等，end_of_line=lf 换行

5、eslintignore,对代码规范进行忽略的位置或文件类型

6、.gitignore，对当前内容上传服务器的忽略，有些文件不需要上传服务器

7、.postcssrc，对css转换的设置，一般不需要更改

8、package.json是规定各类设置等，package-lock.json可以理解为最终落地使用的版本和各类设置