快速搭建的`webpack+vue`项目！

第一步：

npm install -g @vue/cli

第二步：

npm install -g @vue/cli-init

第三步：

vue init webpack  my-project

会有一系列选项，询问项目名称等，可以默认（按Enter键），也可以自定义。

等待几分钟，安装成功：# Project initialization finished!

此时一个快速搭建的webpack+vue项目就构建成功啦！

下面来查看一下项目结构：

tree

.│  .babelrc│  .editorconfig│  .eslintignore│  .eslintrc.js│  .gitignore│  .postcssrc.js│  ii.txt│  index.html│  info.txt│  package.json│  README.md│├─build      # webpack config files│      webpack.base.conf.js│      webpack.dev.conf.js│      webpack.prod.conf.js│      ...├─config│      index.js     # main project config│      ...├─node_modules├─src│  │  App.vue       # main app component│  │  main.js       # app entry file│  ├─ assets        # module assets (processed by webpack)│  │      ...│  ├─ components    # ui components│  │      ...│  └─ router│          index.js│├─static            # pure static assets (directly copied)└─test    └─e2e        │  nightwatch.conf.js        │  runner.js        │        ├─custom-assertions        │      elementCount.js        │        └─specs                test.js

第四步：进入项目文件：

cd my-project

第五步：启动项目：

npm run dev //Compiled successfully in 5030ms                                //20:51:54 //I  Your application is running here: http://localhost:8080

第六步：在浏览器访问项目

http://localhost:8080

打包项目：

npm build

快速搭建的webpack+vue项目！

快速搭建的`webpack+vue`项目！