## Vue項目的創建步驟概覽 Vue的使用可以像使用傳統的JS框架的方式，在一個html文件中導入Vue的JS和CSS文件；但是，更習慣和流行的方式還是使用NPM進行模塊化開發。 本篇基于NPM演示Vue項目的創建和運行，步驟主要包括： 1. 安裝Node.js 2. 安裝淘寶鏡像（可選步驟） 3. 安裝Vue CLI命令工具 4. 創建Vue項目 5. 運行Vue項目 #### 演示環境的安裝規劃 * 系統： Windows 64 位 * Node.js 版本： node-v12.18.3 * Vue CLI版本： v4.5.4 * Node.js安裝路徑：D:\install\nodejs * 項目路徑：D:\demoworkspace\vue * 項目名稱：my-vue ## １. 下載并安裝Node.js Node.js的下載地址是: [https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/) 選擇穩定版本下載：  目前穩定的最新版本是node-v12.18.3，這里在64位Windows系統下開發，所以下載node-v12.18.3-x64.msi安裝文件。 如果官方下載速度慢的話， 也可以從以下網盤地址獲取安裝文件。 鏈接：[https://pan.baidu.com/s/1E9vXuP_UpyDfgrwxceMkRw ](https://pan.baidu.com/s/1E9vXuP_UpyDfgrwxceMkRw ) 提取碼：gve3 ## 設置模塊安裝位置 ``` npm config list npm config set prefix "D:\install\nodejs\node_global" npm config set cache "D:\install\nodejs\node_cache" ``` ## 使用淘寶鏡像 ``` npm install -g cnpm --registry=https://registry.npm.taobao.org ```  在命令行中輸入 `cnpm -v` 如果報“'cnpm' 不是內部或外部命令，也不是可運行的程序...”的錯誤， 則將以下路徑加到操作系統的環境變量中。 D:\install\nodejs\node_global  ## ## 安裝Vue CLI （全局安裝） ``` cnpm install -g @vue/cli ``` 也可以使用npm命令，但是速度非常慢。 驗證Vue CLI是否安裝成功：`vue -V`  ## 創建項目 切換到項目路徑： ``` cd D:\demoworkspace\vue ``` ``` vue create my-vue ```  ## 運行項目 ``` cd my-vue npm run serve ``` http://localhost:8080/  ## 目錄結構與文件說明 * node_modules 依賴模塊 * src 源碼開發目錄 - assets : 圖片放置的位置 - components : 組件源碼放置的目錄 - App.vue 項目入口文件 - main.js 項目的JS核心文件 * public - index.html 主頁入口文件 - favicon.ico 完整的圖標， 會顯示在瀏覽器的Tab上 * package.json 項目配置文件 * README.md 項目說明文檔，提交到GitHub時會顯示說明 * .gitignore Git使用的不需要提交的文件的配置 ## 代碼解析 #### main.js ``` import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app') ``` * `render: h => h(App) ` 是ES6的寫法，作用是生成一個VNode節點，render函數得到這個節點后， 返回給Vue.js 的mount函數，渲染成真實的DOM節點， 并掛載到跟節點上。 `render: h => h(App) ` 相當與如下代碼： ``` render:function(createElement){ return createElement(App); } ``` ES6可以寫為： `render: createElement =>createElement(App) ` 使用 h代替createElement之后， 即寫成： `render: h => h(App) ` 這是Vue2.0的語法， 在Vue1.0中的寫法如下： ``` new Vue({ el:'#app', template:'</App>', components:{App} }) ``` * Vue.use() 使用第三方的組件。（axios不需要這個方法） ## App.vue .vue 模板文件的格式是： ``` <template></template> <script></script> <style></style> ``` export 用于規定模塊的對外接口。 export default是輸出一個叫做default的變量或方法，系統允許為其取任意的名字。 ``` export default { name: 'App', components: { HelloWorld } } ``` 以上導出的模塊在main.js中使用 import 導入使用 ``` import?App?from'./App.vue' ```