vue-cli 3.0腳手架創建vue項目

1. 卸載vue-cli 2.0

npm uninstall -g vue-cli

2. 安裝vue-cli 3.0

npm install @vue/cli

3. 創建項目

npm create <項目名>

4. 如果創建出現如下錯誤： Unexpected end of JSON input while parsing near '...ownload/webpack-0.3.2'，則繼續下面的步驟。

5. 執行下面兩個操作

（1）npm install --registry=https://registry.npm.taobao.org

（2）npm cache clean --force

（3）刪除原來創建的項目文件，重新執行第3條命令 npm create <項目名>

6. 執行npm run serve，即可啟動服務，可通過瀏覽器打開頁面鏈接

成功創建的項目目錄結構如下：

 7.  可根據需要在項目根目錄添加vue.config.js配置文件，並輸入如下內容：

 

module.exports = {
     // 基本路徑
     publicPath: '/',
     // 輸出文件目錄
     outputDir: 'dist',
     // 用於嵌套生成的靜態資產（js，css，img，fonts）的目錄。
     assetsDir: '',
     // 以多頁模式構建應用程序。
     pages: undefined,
     // eslint-loader 是否在保存的時候檢查
     lintOnSave: true,
     // 是否使用包含運行時編譯器的Vue核心的構建。
     runtimeCompiler: false,
     // 默認情況下babel-loader忽略其中的所有文件node_modules。
     transpileDependencies: [],
     // 生產環境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相關配置
     css: {
      // 啟用 CSS modules
      requireModuleExtension: false,
      // 是否使用css分離插件
      extract: true,
      // 開啟 CSS source maps?
      sourceMap: false,
      // css預設器配置項
      loaderOptions: {},
     },
     // webpack-dev-server 相關配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 設置代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 插件相關配置
     pwa: {},
     // 第三方插件配置
     pluginOptions: {
      // ...
     }
}