快速搭建的webpack+vue項目

快速搭建的webpack+vue項目！

參考：https://vuejs-templates.githu...

第一步：

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