1，vue.js安裝與基本使用
1、使用之前，我們先來掌握3個東西是用來幹什麼的
- npm: Nodejs下的包管理器。
- webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合併和打包。
- vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝）
2、下載安裝
- 下載node.js： https://nodejs.org/en/
（選擇左邊，不要選最新的）- 安裝完成node.js後就會生成npm工具，安裝完成後即可下載其他工具
- 利用npm安裝vue.js： npm install vue -g
- 安裝完成後會將文件下載到：D:\nodejs\node_global\node_modules 目錄下
- 我們使用vue.js時只需到 D:\nodejs\node_global\node_modules 文件夾下，複製 vue.js 只需在使用時引用即可
- 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>
# vue.js基本使用
2，安裝vue中插件
1、配置模塊安裝路徑 和環境變量（否則通過npm安裝的插件無法再cmd中使用）
- 首先安裝nodejs ,我的位置是D:\nodejs
- 你自己可以配置模塊安裝路徑：
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache“。- 再去配置環境變量，在系統變量裏新建 NODE_PATH ,值爲 ”D:\nodejs\node_global“，
- 在用戶變量上的path變量添加 ”D:\nodejs\node_global“。 這樣應該就可以了
- 有些包安裝後還是下載到：C:\Users\tom\node_modules 文件夾下
2、安裝vue-devtools插件，便於在chrome中調試vue
- 下載壓縮包：https://github.com/vuejs/vue-devtools
- 安裝參考地址：https://segmentfault.com/a/1190000009682735
- 由於下載包編譯
直接將vue-devtools解壓縮，然後將文件夾中的chrome拖放到擴展程序中
//配置是否允許vue-devtools檢查代碼，方便調試，生產環境中需要設置爲false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue啓動時生成生產消息
- 生產環境關閉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>
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(阿里圖標庫)