vue工程创解与运行

一安装node环境

• 下载地址为：https://nodejs.org/en/

• 下载安装node后检查node和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;">node -v
  npm -v</pre>

• 安装国内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创建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;">//进入项目目录执行
  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 回车；
  //选择对应选项回车初始化项目</pre>

• vue3.0创建项目

  <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

• 安装或卸载出现错误清除缓存在操作

  <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>