vue+webpack+vscode打造TODO应用

安装visual studio code编辑器 https://code.visualstudio.com/Download
配置vscode
将用户设置为自动保存
Ctrl+~键可直接进入vscode的命令行
初始化成npm项目
，应该生成一个package.json文件；
安装webpack和vue-loader
安装缺乏的依赖
完成后，在相应的命令行目录下就会新建成这样
：
新建相应的文件，app.vue，编写相应代码。可是该文件不能直接在浏览器打开，因此新建一个webpack.config.js文件
用来打包前端资源
进行一些属性配置
运行npm run build可能出错
大体意思就是：未设置mode(模式)，请指定是“开发环境”仍是“生产环境”；css

如何解决呢？只须要在package.json中添加配置项：html
```
"scripts": {
    "start": " --mode development",
    "build": "--mode production",
  }
```
执行 npm start 处于开发中调试，有些是 npm run server，只是配置不一样而已；执行 npm run build 打包项目，也就是打包成上线后的代码；前端
再次运行后就不报错了。vue
进行静态资源文件vue类型，css,图片类型等类型文件配置需安装相应依赖，进行相应声明。配置.styl类型的css预处理器stylus等react
进一步配置时安装相应的依赖，使用命令npm i ....webpack

npm i css-loader style-loader file-loader stylus-loader styluses6
安装webpack-dev-server包web
```
npm i webpack-dev-server
```
可以提升开发效率，指定的是开发环境npm

"dev": "webpack-dev-server --config webpack.config.js"

保证脚本同时使用在正式环境和开发环境中，须要根据不一样环境作判断json
安装cross-env,设置一个环境变量，标识是开发环境仍是正式环境。做用是保证跨平台时仍使用同一个脚本，声明同一个开发环境

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
 "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

在webpack.config.js文件中进行配置，启动的时候设置的脚本变量所有存在process.env这个对象里，能够设置不少变量名，均可以经过该对象读取到。
设置host为0.0.0.0的好处：可经过别的电脑或手机访问本电脑的ip,设置为localhost会有必定的局限性。
安装html插件
```
npm i html-webpack-plugin
```
做为前端项目，没有html入口是没法打开的，因此安装一个webpack的html插件

plugins是一个数组，有不少配置选项

plugins:[      //plugin的基础配置
        new webpack.DefinePlugin({   //判断环境，使用变量进行区分，在打包时使用正式环境
            'process.env':{
                NODE_ENV:isDev?'"development"' : '"production"'  //双引号必定要加，不然会报错
            }
        }),
        new HTMLPlugin()
    ]
}

开发环境有不少错误提醒，对于开发环境比较友好，可是正式打包时文件回国大，不利于加载速度，因此定义变量来区分打包版本。vue项目和react项目都要如此考虑。

此时能够运行项目: npm run dev
网址改成localhost:8000

相关配置

webpack官方提供的配置#cheap-module-eval-source-map用来调试代码。
代码编写的是es6代码，直接在浏览器中调试是看不懂的，须要映射一下
重启一下，从新编译。

vue2

数据绑定，vue文件的开发方式

API重点

安装postcss-loader

npm i postcss-loader autoprefixer babel-loader babel-core

在根目录下新建 .babelrc 和postcss.config.js文件

postcss.config.js文件用来后处理css文件。当.styl类型的文件编译成css文件后，用post来优化css代码，经过一系列的逐渐来优化。

安装.babelrc文件所需的配置文件，转换env和jsx文件用的

npm i babel-preset-env babel-plugin-transform-vue-jsx

在webpack.config.js中加上相应的配置：

安装缺乏的相应文件

npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx