vue工程創(chuàng)解與運行

一安裝node環(huán)境

• 下載地址為：https://nodejs.org/en/

• 下載安裝node后檢查node和npm版本確認(rèn)安裝成功

  <pre class="md-fences mock-cm" style="box-sizing: border-box; white-space: pre-wrap; font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">node -v
  npm -v</pre>

• 安裝國內(nèi)npm鏡像如淘寶的

  <pre class="md-fences mock-cm" style="box-sizing: border-box; white-space: pre-wrap; font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">npm install -g cnpm –registry=https://registry.npm.taobao.org
  //檢查是否安裝成功
  cnpm -v</pre>

• 全局安裝vue腳手架

  <pre class="md-fences mock-cm" style="box-sizing: border-box; white-space: pre-wrap; font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">npm install --global vue-cli//vue2版本安裝
  npm install -g @vue/cli-init//vue3版本安裝
  cnpm install -g @vue/cli //yarn global add @vue/cli//3.0版本安裝</pre>

• vue2.0創(chuàng)建vue項目目錄初始化

  <pre class="md-fences mock-cm" style="box-sizing: border-box; white-space: pre-wrap; font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">//進(jìn)入項目目錄執(zhí)行
  vue init webpack 項目名
  Vue build ==> 打包方式，回車即可；
  Install vue-router ==> 是否要安裝 vue-router，項目中肯定要使用到 所以Y 回車；
  Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車；
  Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車；
  Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車；
  //選擇對應(yīng)選項回車初始化項目</pre>

• vue3.0創(chuàng)建項目

  <pre class="md-fences mock-cm" style="box-sizing: border-box; white-space: pre-wrap; font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">vue create demoa
  //啟動項目
  npm run serve</pre>

• vue2.0版本和3.0版本同時存在

  • 新建兩個vue文件夾分別存放vue2代碼和vue3代碼
  • vue2安裝命令-npm install vue-cli
  • vue3安裝命令-npm install @vue/cli

• 安裝或卸載出現(xiàn)錯誤清除緩存在操作

  <pre class="md-fences mock-cm" style="box-sizing: border-box; white-space: pre-wrap; font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">npm cache clean --force</pre>