Vue的相关安装配置
Vue的相关安装配置
介绍
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
初步了解
如果只是学习Vue的基本知识，达到简单的.html页面显示的效果。那么只需要Vue.js就足够了
下载方式
下载地址：https://cn.vuejs.org/v2/guide/installation.html （是Vue.js的官网）
方法一：直接下载vue.js文件，复制到项目中，再通过script标签引入
<script src="../lib/vue.js"></script> //自己vue.js的存放目录
方法二：直接导入vue.js的CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。（当然你不联网，肯定是用不了的＝＝）
注：建议下载开发版本的vue.js文件
基本使用
如果要开发vue项目，那么vue.js就远远不够。因为vue开发是基于Node.js，以此通过npm来安装相关工具的
下载
Node.js的下载
下载地址：https://nodejs.org/zh-cn/download/ (Node.js的官网)
我这里选择的windows64位的安装包
由于在安装时，它帮你配置了Node.js的环境变量，不用自己配置了。
安装完毕后，打开命令行输入命令:node -v和npm -v 来查看版本，以此来确定安装是否成功。
注：npm是一个软件包管理工具，在下载node.js完就有的。
安装淘宝镜像加速器(cnpm)
由于是国外研发的工具，npm下载的是外网的工具，有时候会下载失败，所以需要安装cnpm这种镜像加速器。
在命令行中输入命令：npm install cnpm -g // -g表示全局安装
安装的路径为：C:\Users\shen(用户名)\AppData\Roaming\npm\node_modules
注：以后所有全局安装的都在此路径当中
安装Vue-cli（脚手架）
vue-cli官方提供的一个脚手架，用于快速生产一个vue项目模版
在命令行中输入命令：cnpm install vue-cli -g
通过输入vue list指令查找官方可用的模版，以此来验证安装是否成功
注：一般创建webpack模版的项目
创建一个webpack模版的vue-cli项目
1.以管理员身份进入命令行
2.选择项目的路径，输入命令：init webpack vue_demo （webpack 是模版类型，vue_demo是项目名）
注：这样一个纯净的vue-cli项目诞生了！
3.输入cd vue_demo进入项目目录，输入命令npm install 安装node的相关架包，之后输入命令npm audit fix 修复一些问题
4.输入npm run dev命令，运行项目。
运行成功后进入http://localhost:8080 页面会如上图所示，输入ctrl+c /y 即可停止项目运行(当然这个时候页面无显示==)
安装Webpack
Webpack是一款模块加载器兼打包工具，它能把各种资源，如JS,JSX,ES6,SASS,LESS，图片等都作为模块来处理和使用。
输入命令安装：
npm install webpack -g
npm install webpack-cli -g
输入命令验证安装是否成功：
webpack -v //查看webpack的版本
webpack-cli -v
在项目中输入命令：webpack即可打包（其实就是能把你的项目整合到一个文件当中）
安装Vue-router
vue-rout相当于路由，让页面完成跳转
输入命令 npm install vue-router --save-dev (--save 安装在项目目录中,记得npm audit fix修复)
在项目中的导入以下代码即可使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
安装axios
用于异步通信，与AJAX类似
axios的具体使用可以查看官网：http://www.axios-js.com/zh-cn/docs/
法一：使用CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
法二：使用npm（推荐使用）
npm install axios
安装UI架构
目前主流的UI架构有Ant-Design,ElementUI,Bootstrap,AmazeUI 四种。我这里用的是ElementUI架构
ElementUI的具体使用可以查看官网：https://element.eleme.cn/#/zh-CN/component/installation
输入命令 npm i element-ui -S （-S是--save的缩写）
输入命令 cnpm install sass-loader node-sass --save-dev （安装SASS加载器，因为element-ui中有用到）
在项目中导入以下代码即可使用
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
node.js的卸载
node.js的卸载，有时候在项目开发时所需要的版本是低版本，就需要卸载高版本，安装低版本，但是在删除本地的node.js文件夹后再安装的时候显示最新版已安装无法卸载
C:\ProgramData\Microsoft\Windows\Start Menu这个路径下面有个uninstall node.js，需要运行卸载的程序之后才能正常安装，不然会导致卸载不干净无法安装。
npm镜像源的切换
查看本体镜像源:
npm config get registry
淘宝npm镜像源
registry地址: https://registry.npm.taobao.org/
cnpm镜像源
registry地址: https://r.cnpmjs.org/
默认的镜像源(npm镜像源)
registry地址: https://registry.npmjs.org/
镜像源的网址更改:
npm config set registry https://registry.npm.taobao.org
浙公网安备 33010602011771号