一、安裝腳手架（已有則跳過）

npm install -g @vue/cli

如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，需要先通過npm uninstall vue-cli -g卸載舊版

二、基于vue的模板創(chuàng)建項目（詢問配置后自動運行npm install安裝相關依賴包）

vue init webpack Vue-Project

1、其中 webpack 是模板名稱，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
2、Vue-Project 是自定義的項目名稱，命令執(zhí)行之后，會在當前目錄生成一個以該名稱命名的項目文件夾
3、詢問完項目配置后回自動執(zhí)行npm install

初始化過程

安裝完畢

三、測試運行

cd Vue-project   
npm run dev     //在開發(fā)環(huán)境運行

運行

效果

四、配置ESLint(可選)
1、添加ESLint規(guī)則：項目根目錄打開.eslintrc.js修改，更多配置見https://cn.eslint.org/docs/user-guide/configuring

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': ['error', 'always'],
    'indent': 'off',
    'vue/script-indent': ['error', 2, {
      'baseIndent': 1
    }],
    'space-before-function-paren': ['error', {
      'anonymous': 'always',
      'named': 'never',
      'asyncArrow': 'always'
    }]
  }

2、ESLint修復代碼：
a、傳參，運行npm run lint -- --fix
b、修改配置，打開根目錄的package.json，在stript中的lint添加 --fix選項

"lint": "eslint --fix --ext .js,.vue src",

運行npm run lint即可觸發(fā)

五、項目配置優(yōu)化
打開config/index.js
1、修改dev環(huán)境的啟動地址（dev屬性）：

host: 'localhost',   //可修改為局域網(wǎng)地址，讓其他局域網(wǎng)設備打開
port: 8080,          // 端口
autoOpenBrowser: true,   //默認false，修改成true自動在瀏覽器打開

2、修改build環(huán)境的打包輸出路徑（build屬性）：

index: path.resolve(__dirname, '../dist/index.html'),    //入口html文件的輸出路徑
assetsRoot: path.resolve(__dirname, '../dist'),               // 資源文件的輸出路徑
assetsSubDirectory: 'static',
assetsPublicPath: '/',     //默認是'/',修改為'./'，否則打包后的資源在本地瀏覽器打開不顯示

開發(fā)完成后，可運行npm run build打包，會根據(jù)build中配置的路徑輸出相關文件（此配置為dist文件夾，可自行修改），項目上線時，只需要將 dist 文件夾的內容放到服務器即可。

3、修復生產(chǎn)打包后的資源，在本地打開空白及無法顯示靜態(tài)資源：
a、在config/index.js的build屬性中,添加assetsPublicPath: './'

index: path.resolve(__dirname, '../dist/index.html'),   
assetsRoot: path.resolve(__dirname, '../dist'),  
assetsSubDirectory: 'static',
assetsPublicPath: './',     //默認是'/',修改為'./'，否則打包后的資源在本地瀏覽器打開不顯示

b、在build/utils.js文件中添加publicPath:'../../'

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }