构建好项目的基本文件目录
-
新建一个文件夹vueOne，安装vue：npm i vue；
-
全局和本地安装webpack(由于已经全局安装，所以每次只需要本地安装即可),安装前初始化：npm init -y,接着本地安装：npm i webpack --save-dev；
-
在vueOne文件夹下新建src文件,在src文件下新建index.html（项目的首页）,main.js(项目的js入口文件),app.vue；
-
在项目的根目录下，即vueOne文件下，新建一个webpack.config.js文件，是一个配置文件；
-
在项目的根目录下，新建一个.babelrc.json的文件，是一个.json的配置文件；
-
在package.json“scripts”中配置： "dev": "webpack-dev-server --mode development --open --port 8000 --hot"；
-
安装插件 webpack-cli webpack-dev-server(实现自动打包编译功能) html-webpack-plugin(自动在内存中根据指定页面生成一个内存页面，并把自动打包好的js文件追加到页面中) style-loader,css-loader(打包处理css文件) less-loader(打包处理.less文件) node-sass,sass-loader(处理.sass文件) url-loader,file-loader(处理图片文件)
