快速搭建的 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