1、安裝Nodejs-8.9.3

https://nodejs.org/zh-cn/download/

下載安裝https://nodejs.org/download/release/v8.9.3/

image.png

安裝完成后，命令行升級一下npm

$ sudo npm install npm@latest -g
$ npm -v
6.4.1

權(quán)限設(shè)置

$ npm config get prefix
/usr/local
$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

npm config get prefix是用來找到npm的目錄
sudo chown -R (npm config get prefix)/{lib/node_modules,bin,share}給當(dāng)前用戶讀寫npm相關(guān)目錄的權(quán)限。

2、安裝webpack和vue-cli

//在全局安裝了webpack sudo npm install webpack -g
$ sudo npm install webpack -g
$ npm install vue-cli -g

$ npm list -g --depth=0
/usr/local/lib
├── create-react-native-app@1.0.0
├── es-checker@1.4.1
├── npm@5.5.1
├── vue-cli@2.9.1
└── webpack@3.8.1

創(chuàng)建工程

$ cd your_workspace_folder
$ vue init webpack projectname

比如我的工程名為vueStart，輸入的地方?jīng)]有什么需求直接回車就行了。

$ vue init webpack-simple vueStart

? Project name vuestart
? Project description A Vue.js project
? Author tomfriwel <xxx@xx.com>
? Use sass? No

   vue-cli · Generated "vueStart".

   To get started:
   
     cd vueStart
     npm install
     npm run dev.

這里注意的是，如果用vue init webpack-simple projectname，之后npm run dev是運(yùn)不起來的。所以這里用的webpack而不是webpack-simple

這里的vue init webpack和npm install webpack不一樣
vue init webpack是安裝webpack模板（也可以是以下列出的一些模板webpack-simple/browserify...）
具體信息可以查看vuejs-templates/webpack

一些可用的模板

*   [webpack](https://github.com/vuejs-templates/webpack) - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
*   [webpack-simple](https://github.com/vuejs-templates/webpack-simple) - A simple Webpack + vue-loader setup for quick prototyping.
*   [browserify](https://github.com/vuejs-templates/browserify) - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
*   [browserify-simple](https://github.com/vuejs-templates/browserify-simple) - A simple Browserify + vueify setup for quick prototyping.
*   [pwa](https://github.com/vuejs-templates/pwa) - PWA template for vue-cli based on the webpack template
*   [simple](https://github.com/vuejs-templates/simple) - The simplest possible Vue setup in a single HTML file

配置工程

進(jìn)入創(chuàng)建的工程目錄

$ cd vueStart/
$ npm install

npm install后就會安裝一些亂七八糟的東西。
安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請求模塊vue-resource，這兩個(gè)如果用不到也可以不用裝。

$ npm install vue-router vue-resource --save
+ vue-resource@1.3.4
+ vue-router@3.0.1
added 17 packages in 6.541s

--save的作用

運(yùn)行和構(gòu)建

$ npm run dev

沒什么問題的話，打開頁面是這樣的

image.png

發(fā)布

執(zhí)行

$ npm run build

完成后會生成一個(gè)dist文件夾

dist
├── index.html
└── static
    ├── css
    │   └── app.86d25fd679f2d9f5bee9162ae7804b46.css
    └── js
        ├── app.bcbf2665a80fe0bdc316.js
        ├── app.bcbf2665a80fe0bdc316.js.map
        ├── manifest.f9cc8df0a9bc12617260.js
        ├── manifest.f9cc8df0a9bc12617260.js.map
        ├── vendor.5edf78e409459ac3ccd1.js
        └── vendor.5edf78e409459ac3ccd1.js.map

如果是想本地運(yùn)行而不是放到服務(wù)器上，需要對config/index.js進(jìn)行一個(gè)小更改。將build中的assetsPublicPath改為./，不然會找不到資源，最后再次npm run build，就可以直接瀏覽器打開dist文件夾下的index.html了。

源文件鏈接：
https://segmentfault.com/a/1190000011657381