簡介

這個是基於尚品彙專案開發的電商前端專案

vue-cli腳手架初始化專案

node + webpack + 淘寶映象，因為這些我記得我的電腦之前已經安裝好了，現在只要確認一下是不是版本號就行了。

確認npm、cnpm版本號

因為之前電腦就安裝好npm和cnpm，所以現在確認是不是安裝好了。

如何解除安裝掉和安裝vue-cli腳手架

解除安裝vue-cli腳手架

因為操作錯誤安裝了最新版的vue-cli，首先檢視一安裝是哪一個版本的vue-cli腳手架：

現在需要重新解除安裝重新安裝一下，進入專案目錄，輸入命令：

//解除安裝3.0之前的版本
npm uninstall -g vue-cli
yarn global remove vue-cli

//解除安裝3.0之後的版本（可以統一使用此指令解除安裝）
npm uninstall -g @vue/cli
yarn global remove @vue/cli
 

安裝vue-cli腳手架

//安裝3.0之後的版本
安裝最新版本 cnpm install -g @vue/cli
安裝指定版本 cnpm install -g @vue/cli@版本號

//安裝3.0之前的版本
安裝最新版本 cnpm install -g vue-cli
安裝指定版本 cnpm install -g vue-cli@版本號

安裝專案需求，現在安裝的是2.9.6版本的vue-cli腳手架

但是這裡要注意的是，vue -V檢查的不是vue的版本號，而是vue-cli腳手架的版本號，然後我們檢查一下vue的版本號，進入專案目錄檔案輸入 cnpm ls vue

安裝Webpack

進入當前專案目錄下，輸入以下命令全域性安裝Webpack：

cnpm install webpack -g

看到下面這個，就表示我們安裝好Webpack了

建立子涵優品專案資料夾

在project資料夾下，開啟控制檯命令列視窗，輸入以下命令：

vue create ZHYP

但是彈出以下情況：

它說vue create這個命令是Vue CLI 3的命令，可以通過下面的命令升級到Vue CLI 3

npm unintasll -g vue-cli
npm install -g @vue/cli

我們根據它的要求升級到Vue CLI 3，然後再檢視一下版本號：

然後，我們再輸入上面那一條命令vue create ZHYP，重新建立以下資料夾，但是報錯了：

vue和vue-template-compiler版本不匹配

根據上面的提示，vue的版本是[email protected]，vue-template-compiler版本是[email protected]，兩個版本不匹配。

在網上找了一下解決方法，嘗試著將vue的版本降低到和vue-template-compiler的版本一樣，輸入以下命令：

cnpm install [email protected] --save

可以看到現在的vue版本也是2.6.14了。然後，我們再重新操作一下，但是發現還是不行：

然後又到網上找答案，發現上面那裡沒有安裝到全域性變數，會不會是這裡的問題呢，於是，我把上面的命令改為全域性變數的命令：

cnpm install [email protected] --save -g

但是還是不行，vue的版本還是不變：

再嘗試一下網上的另一種方法：

先解除安裝：cnpm uninstall vue-template-compiler@版本號
再安裝：cnpm install

好像可以了，但是出現小小的警報，說在桌面不存在package.json這個檔案，警告好像沒有什麼的，專案能跑就行，所以暫時忽略這個問題：

還有一個問題，本來專案資料夾我是輸入全大寫的，但是提示錯誤，說現在不支援大寫，所以我就輸入小寫，接下來選擇預設選項：

剩下工作就交給電腦了，跑完之後會看到這個，表示成功建立專案檔案夾了：

按照它給的提示看能不能在本地伺服器執行這個子涵優品專案，現在顯示編譯成功：

上面的提示說，我們子涵優品這個專案會跑在這兩個地址上，所以我分別在瀏覽器的位址列輸入這兩個地址，開啟控制檯也沒有發現有什麼錯誤：

自動開啟瀏覽器

但是還是有一點瑕疵，因為這是我是手動在瀏覽器的位址列上輸入的地址，現在我們讓子涵優品這個專案，每當我們跑完cnpm run serve這條命令，會自動開啟瀏覽器，關閉掉npm命令列視窗，重新進入專案根目錄，但是沒有發現這個vue.config.js檔案：

那麼我們就新建一個vue.config.js檔案，輸入以下程式碼：

module.exports = {
  // 基本路徑 baseURL已經過時
  publicPath: './',  
  // 輸出檔案目錄
  outputDir: 'dist',
  // eslint-loader 是否在儲存的時候檢查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置項
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生產環境是否生成 sourceMap 檔案
  productionSourceMap: true,
  // css相關配置
  css: {
   // 是否使用css分離外掛 ExtractTextPlugin
   extract: true,
   // 開啟 CSS source maps?
   sourceMap: false,
   // css預設器配置項
   loaderOptions: {},
   // 啟用 CSS modules for all css / pre-processor files.
   modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  // 是否啟用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 外掛相關配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相關配置
  devServer: {
    open: process.platform === 'darwin',
    disableHostCheck: true,
    host: 'www.test.com',//如果是真機測試，就使用這個IP
    port: 1234,
    https: false,
    hotOnly: false,
   before: app => {}
  },
  // 第三方外掛配置
  pluginOptions: {
   // ...
  }
 }

找到下面這段程式碼：

devServer: {
    open: process.platform === 'darwin',
    disableHostCheck: true,
    host: 'www.test.com',//如果是真機測試，就使用這個IP
    port: 1234,
    https: false,
    hotOnly: false,
   before: app => {}
  },

把open: process.platform === 'darwin'先註釋掉，再重新寫一條，把open屬性的值改為true，重新跑一下cnpm run serve這條命令，看瀏覽器能不能自動開啟：

出現上面的問題，應該是IP地址和埠的問題，現在我們檢視一下本地伺服器的IP地址，關掉跑著的命令列視窗，重新開啟一個，輸入ipconfig：

拿著這個IP地址去修改上面vue.config.js中的

host: 'www.test.com',//如果是真機測試，就使用這個IP
port: 1234,

現在改為：

host: '192.168.31.70',
port: 8080,

再重新cnpm run serve一下，發現是可以跑通的：

在project資料夾中多出了一個資料夾，我記得原來是沒有的，而且在專案資料夾裡也有一個同名的資料夾，所以現在把它剪切出來，看專案還能不能跑通：

最後發現還是可以跑的：

那麼這個階段的開發我們已經算完成了！