1.1 vue.js安装与基本使用
官网：https://cn.vuejs.org/
1、使用之前，我们先来掌握3个东西是用来干什么的
1. npm: Nodejs下的包管理器。
2. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
3. vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
2、下载安装
1. 下载node.js： https://nodejs.org/en/ （选择左边，不要选最新的）
2. 安装完成node.js后就会生成npm工具，安装完成后即可下载其他工具
3. 利用npm安装vue.js： npm install vue -g
4. 安装完成后会将文件下载到：D: odejs ode_global ode_modules 目录下
5. 我们使用vue.js时只需到 D: odejs ode_global ode_modules 文件夹下，复制 vue.js 只需在使用时引用即可
6. npm install -g cnpm -registry=https://registry.npm.taobao.org # 设置淘宝的仓库路径
3、引入vue.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <!-- 向容器中渲染新闻--> <div id="app">{{ msg }}</div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> // 定义数据模型 var data = { msg:"vue.js基本使用！！！" // 使用的数据 }; // 定义视图模型 var app = new Vue({ // 绑定视图 el:'#app', // 绑定模型 data:data }); </script> </body> </html>
1.2 安装vue中插件
1、配置模块安装路径 和环境变量（否则通过npm安装的插件无法再cmd中使用）
1. 首先安装nodejs ,我的位置是D: odejs
2. 你自己可以配置模块安装路径：
npm config set prefix “D:
odejs
ode_global”
npm config set cache “D:
odejs
ode_cache“。
3. 再去配置环境变量，在系统变量里新建 NODE_PATH ,值为 ”D: odejs ode_global“，
4. 在用户变量上的path变量添加 ”D: odejs ode_global“。 这样应该就可以了
5. 有些包安装后还是下载到：C:Users om ode_modules 文件夹下
2、安装vue-devtools插件，便于在chrome中调试vue
1. 下载压缩包：https://github.com/vuejs/vue-devtools
2. 安装参考地址：https://segmentfault.com/a/1190000009682735
3. 由于下载包编译
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <script src="js/vue.js"></script> <script> window.onload=function(){ //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false Vue.config.devtools=false; Vue.config.productionTip=false; //阻止vue启动时生成生产消息 var vm=new Vue({ el:'#itany', //指定关联的元素 data:{ //存储数据 msg:'Hello World' } }); } </script> </head> <body> <div id="itany"> {{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 --> </div> <h3> {{msg}} </h3> </body> </html>
1.3 vue安装报错整理
1、执行 npm install 命令时报错
1、如果你的项目里存在 package-lock.json 文件，删除它。并且删除 node_modules。然后再 npm install。
2、第一步不行的话。运行 npm cache clean --force 或者 npm cache verify 。然后再 npm install。
3、如果上面的都不行，就升级 npm 。 npm i -g npm
解决安装慢问题：npm install --registry=https://registry.npm.taobao.org
2、Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
https://blog.csdn.net/qq_32113629/article/details/79740949