1、配置 Node 環(huán)境。
自行百度吧。
安裝好了之后，打開 cmd 。運行 node -v 。顯示版本號，就是安裝成功了。
注：不要安裝8.0.0以上的版本，和 vue-cli 不兼容。
我使用的 6.10.3 的版本，相對穩(wěn)定。
2、使用 npm 管理依賴
使用 node 自帶的包管理工具 npm 管理項目中的依賴，由于 npm 的服務(wù)器在國外。經(jīng)常會遇到速度奇慢或者下載不下來依賴的情況，所以推薦使用淘寶鏡像。
npm install-g cnpm--registry=https://registry.npm.taobao.org
這樣我們就可以使用 cnpm 代替 npm 執(zhí)行命令了。
? 全局安裝 vue-cli 模塊。
cnpm install vue-cli -g
執(zhí)行 vue -V （此處是大寫的 V），顯示版本號表示安裝成功。
3、創(chuàng)建項目
先到你的根目錄下，運行 cmd 。執(zhí)行如下代碼，創(chuàng)建項目。
?vue init webpack <project name>
? Project name ?輸入項目名稱
? Project description 輸入項目描述
? Author 作者
? Vue build 打包方式，回車就好了
? Install vue-router? ?選擇 ?Y 使用 vue-router，輸入 N 不使用
? Use ESLint to lint your code? 代碼規(guī)范，推薦 N
? Setup unit tests with Karma + Mocha? 單元測試，推薦 N
? Setup e2e tests with Nightwatch? E2E測試，N
4、運行項目
好了，現(xiàn)在我們已經(jīng)建立好自己項目了。但是還沒初始化。
cd <project name> ? ?// cd 你剛才寫建立的項目名。進(jìn)入。
cnpm install ? ?// 初始化項目，安裝依賴。
到此項目已經(jīng)初始化完畢了，我們可以執(zhí)行如下命令查看。
cnpm run dev
5、構(gòu)建路由
找到 src/router/index.js 打開。把它改成如下這樣。
import Vue from 'vue' ? ? // 引入 vue
import Router from 'vue-router' ? ?// 引入 vur-router
import Hello from '@/components/Hello' ? ?// 引入 Hello 模塊
import Home from '@/components/Home'? ? // 引入 Home 模塊
Vue.use(Router) ? ? // 注冊 vue-router
export default new Router({
? ? routes: [
? ? ? ? {
? ? ? ? ? ? path: '/',
? ? ? ? ? ? name: 'Hello',
? ? ? ? ? ? component: Hello
? ? ? ?},
? ? ? {
? ? ? ? ? ?path:'/home',
? ? ? ? ? ?name:'home',
? ? ? ? ? ?component: Home
? ? ?｝
? ? ]
})
到這一步，路由已經(jīng)配置好了。但是我們還沒有home這個頁面。
找到 src/router/components/ 打開。
在里面新建一個 Home.vue 。
打開改成以下代碼。
<template>
? ? <h1>{{ text }}</h1>
</template>
<script>
export default {
? ? name: 'home',
? ? data () {
? ? ? ? return {
? ? ? ? ? ? text: 'this is homepage'
? ? ? ?}
? ? }
}
</script>
<style scoped>
</style>
到此，我們的項目已經(jīng)初始化完成了。切換路由/home就可以看到我們剛才加入的頁面了。
