vue漸進式框架 腳手架安裝及路由

第1步：安裝node.js

驗證node.js是否安裝成功：

node -v

npm -v

# 全域性安裝cnpm這個工具

# -g 表示全域性安裝，一次安裝，永久使用
npm install -g cnpm --registry=

# -g 表示全域性安裝

cnpm install @vue/cli -g

# 先進入目標目錄 

vue create vue-study
# 在建立專案的過程中，可能會涉及到vue版本的選擇，建議選擇2.0
# 如果還需要選擇包管理工具，建議使用 npm

# 進入專案的根目錄

(cd vue-study)
npm run serve
# 在瀏覽器中通過本地服務來訪問vue專案
# 自己配置乙個start命令
npm start

執行cnpm install可以根據package.json檔案進行重灌

1、node_modules

是整個vue程式執行所必須的依賴，不能隨便改

當你分享**時，node_modules不用給別人

是整個應用程式的說明檔案

它記錄當前應用程式所需要的第三方包
它還指定專案若干操作命令

是本地靜態資源服務目錄

是原始碼目錄，工作中寫**的地方

main.js是應用程式的入口檔案

作用：用於實現單頁面應用程式

第1步：安裝vue-router

cnpm install vue-router -s

# -s 表示安裝完成時，同步把這個包記錄在package.json檔案'dependencies'中
# -d 表示安裝完成時，同步把這個包記錄在package.json檔案'devdependencies'中
# -g 表示全域性安裝這個包，一次安裝，永久使用

# 引入vuerouter類，並註冊

import vue from 'vue'
import vuerouter from 'vue-router'
vue.use(vuerouter)
# 引入路由匹配所需要的元件
import home from './pages/home.vue'
import find from './pages/find.vue'
# 建立路由例項，並丟擲
export default new vuerouter(,
]})

import router from './router.js'

new vue()

'/home'
tag='span'
exact-active-class
='on'
>
首頁router-link
>
'/find'
tag='span'
exact-active-class
='on'
>
發現router-link
>
'/' tag
='span'
exact-active-class
='on'
>
todorouter-link
>
>
router-view
>

vue漸進式框架 安裝及指令

知識點 基於vue宣告式渲染，資料雙向繫結。vue例項資料發生變化，dom介面自動更新 dom介面變化，vue例項資料也自動更新。doctype html utf 8 title head v text 叫做指令 msg h1 foo h2 text v model username passwor...

vue腳手架安裝

cli 別名 腳手架 npm cnpm yarn 作用 版本 cli2 cli3 安裝npm install vue cli g cli3的版本 npm install vue cli g cli2的版本 yarn add vue cli global步驟 先安裝cli3 在安裝 vue cli i...

vue安裝腳手架

如果之前安裝過舊版本 非3.x 腳手架需要先解除安裝舊版本 命令 nmp uninstall vue cli g mac電腦需要在前面 加sudo nmp install g vue cli 安裝腳手架，用於生成專案 安裝得比較久 nmp install g vue cli service glob...