配置vscode
将用户设置为自动保存
Ctrl+~键可直接进入vscode的命令行
初始化成npm项目
，应该生成一个package.json文件；
安装webpack和vue-loader
安装缺少的依赖
完成后，在相应的命令行目录下就会新建成这样
：
新建相应的文件，app.vue，编写相应代码。但是该文件不能直接在浏览器打开，所以新建一个webpack.config.js文件
用来打包前端资源
进行一些属性配置
运行npm run build可能出错
大致意思就是：未设置mode(模式)，请指定是“开发环境”还是“生产环境”；
如何解决呢？只需要在package.json中添加配置项：
"scripts": {
"start": " --mode development",
"build": "--mode production",
}执行 npm start 处于开发中调试，有些是 npm run server，只是配置不同而已；执行 npm run build 打包项目，也就是打包成上线后的代码；
再次运行后就不报错了。
进行静态资源文件vue类型，css,图片类型等类型文件配置需安装相应依赖，进行相应声明。配置.styl类型的css预处理器stylus等
进一步配置时安装相应的依赖，使用命令npm i ....
npm i css-loader style-loader file-loader stylus-loader stylus安装webpack-dev-server包 npm i webpack-dev-server
能够提高开发效率，指定的是开发环境
"dev": "webpack-dev-server --config webpack.config.js"保证脚本同时使用在正式环境和开发环境中，需要根据不同环境做判断
安装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
