vue的專案搭建和路由測試

1 安裝node.js

node.js安裝教程

新版的nodejs已經整合了npm,所以npm會隨著nodejs一併安裝完成.開啟cmd命令列視窗輸入以下兩個命令,測試是否安裝成功.

node -v

npm -v

2 安裝阿里npm映象

執行如下命令

npm install -g cnpm --registry=

執行如下命令全域性安裝vue-cli

cnpm install vue-cli -g

vue list

4 選定專案路徑

選定乙個建立專案的資料夾,然後在命令列cd到這個目錄中

cd c:\users\lvjianhua\ideaprojects\vue

在選定好目錄下執行如下命令,最後的單詞是自己命名的專案名稱,這裡我就叫 myproject 了

vue init webpack myproject

輸入完成後,等待專案初始化,出現如下內容,說明專案初始化成功了

6 使用idea開啟專案

啟動idea,點選open

開啟剛才的專案

等待idea專案載入完畢.到此為止不再使用cmd命令列視窗了,接下來的操作都在idea中進行

7 執行專案

開啟idea的終端terminal輸入以下命令

npm run dev

訪問上圖中的位址

頁面中成功出現以上內容,代表專案確實成功執行,接下來,簡單測試一下路由.

8 安裝路由

想要使用路由功能需要安裝vue-router,但是我們在專案初始化階段已經選擇自動安裝了,所以不再需要手動安裝,直接使用就可以.並且專案在src下生成的main.js也已經自動新增了路由的配置我們一般不需要修改

main.js內容如下

import vue from 'vue'

import router from './router'//自動掃瞄裡面的路由配置
vue.config.productiontip = false
new vue()

cnpm install vue-router

one.vue

import vue from 'vue'

import router from 'vue-router'
//匯入元件
import one from '../components/one'
import two from '../components/two'
//安裝路由
vue.use(router)
//配置匯出路由
export default new router(,
]})

twofont-family: '**enir', helvetica, arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}12 檢視網頁頁面

網頁會自動更新,顯示修改後的內容

vue專案搭建和執行

在師兄的推薦下入坑vue.js 發現不知如何執行github上的開源專案，很尷尬。通過查閱網上教程，成功搭建好專案環境，同時對前段工程化有了朦朦朧朧的認知，因此將環境搭建過程分享給大家。首先，列出來我們需要的東西 安裝node.js 安裝完成之後，開啟命令列工具，輸入 node v，如下圖，如果出現...

vue專案路由搭建

找到專案中src router，並在其下建立乙個index.js檔案 之後引入檔案和編寫路由 import vue from vue import router from vue router export const constantroutes children export default r...

DPDK環境搭建和測試

gnumake coreutils cmp,sed,grep,arch gcc versions 4.5.x libcheaders glibc devel.i686 libc6 dev i386 glibc devel.x86 64 for 64 bitcompilation linuxkerne...