### 使用npm創建 1. 安裝node.js ``` npm config set prefix "D:\inssoftware\nodejs" ``` D:\inssoftware\nodejs 是NodeJS的安裝路徑， 需要指定該路徑。 否則安裝后無法使用 vue命令，除非再添加環境變量。 ``` npm install vue npm install vue-router ``` 2. 安裝 vue-cli `npm install --global vue-cli` 和Maven很類似， 默認的目錄是：C:\Users\XXXX\AppData\Roaming\npm\node_modules 全局模塊插件存放路徑 3.初始項目 `cd D:\devworkspace\nodejs` `vue init webpack my_vue_project` 以上命令會交互式進行創建項目， 會詢問是否要測試等都能問題，如果使用默認的設置，可以加 -y。 -y 使用默認設置 ``` vue -y init webpack my_vue_project ``` 4. 項目目錄結構 * build: 使用webpack構建的代碼 * config : 配置目錄， 包括端口號等 * src : 源碼目錄 * assets : 圖片等 * components : 組件文件 * App.vue 項目入口文件 * main.js 項目的js核心文件 * router: Vue路由文件目錄，在router/index.js 中定義不同url的不同的內容 * static: 靜態資源目錄，如圖片，字體 * test 測試目錄 * index.html 首頁入口文件 * package.json 項目配置文件 * README.md 項目說明文檔， markdown格式 5.運行項目 ``` npm run dev ``` 6. 安裝Element UI ``` npm i element-ui -S ``` 7. 在src/main 中引用 element-ui ``` importElementUIfrom'element-ui' import'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip?=?false Vue.use(ElementUI) ``` ElementHelloWorld.vue ``` <template> <div class="CopClass"> <h1>{{msg}}</h1> <h2>按鈕效果</h2> <el-button>默認按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="text">文字按鈕</el-button> </div> </template <script> export default{ name:'CopName', data(){ return { msg : 'Vue + Element-UI 頁面' } } } </script> ``` router/index.js ``` Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld },{ path: '/enter/', name: 'CopName', component: CopClass } ] }) ``` http://localhost:8080/#/enter