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>