### 使用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
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS