vue-webpack配置及创建项目

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

1、node npm的安装

2、webpack全局安装 npm instal webpack @版本 -g 如webpack install webpack@3.6.0 -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:UsersAdministratorAppDataRoaming pm-cache 或者指令 npm clean cache -force,注意有时候需要用管理员身份运行cmd

三、vuecli2创建后项目的配置

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可以理解为最终落地使用的版本和各类设置

9、如果在开发中解除Eslint（输入规范）,在config文件夹中index.js中将“useEslint:true”改为false

四、runtimecompiler与runtime-only区别

&认识createElement函数，创建元素

createElement('h3',{class:'box'},['hello,world'])

三个参数：html元素，属性，内容

&简单说runtime-compiler模式：将tempalate->abstract syntax tree抽象语法树->使用render函数渲染->virtual dom ->ui

runtime-only模式：则直接至render渲染

现在也没有理解，只能先记着是这么回事

五、vuecli3项目的配置

1、修改配置的方法三种

第一种，指令 vue ui 这是一个全局指令

vue版本和vue-template-compiler版本要保持一致，后者是用于编译前者

第二种 找到文件webpack.config.js文件位于node_modules@vuecli-service文件夹下

第三种 在目录下创建vue.config.js输入 module.exports = {内容} vue系统会自动搜索该配置文件内容，名称为固定

　　　　修改后完善git 指令 git add -> git status ->git commit -m "修改配置文件"