1磁奖、配置 Node 環(huán)境。
自行百度吧某筐。
安裝好了之后比搭，打開 cmd 。運(yùn)行 node -v 南誊。顯示版本號(hào)身诺，就是安裝成功了蔽莱。
注：不要安裝8.0.0以上的版本，和 vue-cli 不兼容戚长。
我使用的 6.10.3 的版本，相對(duì)穩(wěn)定怠苔。
2同廉、使用 npm 管理依賴
使用 node 自帶的包管理工具 npm 管理項(xiàng)目中的依賴，由于 npm 的服務(wù)器在國外柑司。經(jīng)常會(huì)遇到速度奇慢或者下載不下來依賴的情況迫肖，所以推薦使用淘寶鏡像。
npm install-g cnpm--registry=https://registry.npm.taobao.org
這樣我們就可以使用 cnpm 代替 npm 執(zhí)行命令了攒驰。
? 全局安裝 vue-cli 模塊蟆湖。
cnpm install vue-cli -g
執(zhí)行 vue -V （此處是大寫的 V），顯示版本號(hào)表示安裝成功玻粪。
3隅津、創(chuàng)建項(xiàng)目
先到你的根目錄下，運(yùn)行 cmd 劲室。執(zhí)行如下代碼伦仍，創(chuàng)建項(xiàng)目。
?vue init webpack <project name>
? Project name ?輸入項(xiàng)目名稱
? Project description 輸入項(xiàng)目描述
? 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、運(yùn)行項(xiàng)目
好了协怒，現(xiàn)在我們已經(jīng)建立好自己項(xiàng)目了涝焙。但是還沒初始化。
cd <project name> ? ?// cd 你剛才寫建立的項(xiàng)目名斤讥。進(jìn)入纱皆。
cnpm install ? ?// 初始化項(xiàng)目，安裝依賴芭商。
到此項(xiàng)目已經(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) ? ? // 注冊(cè) vue-router
export default new Router({
? ? routes: [
? ? ? ? {
? ? ? ? ? ? path: '/',
? ? ? ? ? ? name: 'Hello',
? ? ? ? ? ? component: Hello
? ? ? ?},
? ? ? {
? ? ? ? ? ?path:'/home',
? ? ? ? ? ?name:'home',
? ? ? ? ? ?component: Home
? ? ?｝
? ? ]
})
到這一步簸州，路由已經(jīng)配置好了鉴竭。但是我們還沒有home這個(gè)頁面歧譬。
找到 src/router/components/ 打開。
在里面新建一個(gè) Home.vue 搏存。
打開改成以下代碼瑰步。
<template>
? ? <h1>{{ text }}</h1>
</template>
<script>
export default {
? ? name: 'home',
? ? data () {
? ? ? ? return {
? ? ? ? ? ? text: 'this is homepage'
? ? ? ?}
? ? }
}
</script>
<style scoped>
</style>
到此，我們的項(xiàng)目已經(jīng)初始化完成了璧眠。切換路由/home就可以看到我們剛才加入的頁面了缩焦。
