亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

node.js安裝：https://www.nodejs.cn

安裝node成功之后，node -v不可運行，需要配置環境變量

window：我的電腦-系統屬性-環境變量-path

查看node版本號：node -v

npm是node.js的一個指令。

查看npm版本號：npm -v

vue-cli：cli2、cli3

Command-Line Interface：又稱命令行界面或字符用戶界面

為什么使用vue-cli?? ? Vue-cli是Vue的腳手架工具

1. 平臺無關性、功能更齊全

2. 占內存少、更高效

3. 幫助我們寫好vue基礎代碼的工具，也是行業內通用的工具

系統的認識一下vue的主體結構

app.vue是所有vue文件的父級優先級是最高的主題文件

目前所有的默認配置來源于app.vue的設置其中包括：

居中：在樣式中text-align: center;

圖片：是第三行的標簽<img src="./assets/logo.png">

補充

<script></script>：為邏輯層，所有的邏輯代碼以及配置項都在這里完成

<style></style>：為樣式層，頁面的樣式在這里定義

如何導入vue-cli項目

cd進入到項目中然后npm install安裝vue項目依賴

進入后可以先檢查是否有vue-cli項目的運行環境，驗證npm與vue是否安裝即可：

npm -v 和vue -V（注意vue -V V 是大寫的）

如果都出現版本號就不需要安裝npm依賴直接可以npm run dev

都實現以后就可以直接將項目跑起來

npm run dev

關于vue-cli 的添加與卸載

準備工作

在這里以eslint為例

回顧一下創建vue項目的語法：

vue init webpack projectName

eslint：為 vue 的代碼的規范檢查插件

注意安裝的內容放到什么環境中：

-g：--global（全局）

-S：--save（生產環境：dependencies）//針對可以上線的項目

-D：--save-dev（開發環境：devDependencies）//針對開發過程中

安裝與卸載

npm install eslint --save-dev（把eslint安裝到開發環境中）

npm uninstall eslint --save-dev（把eslint從開發環境中移除）

關于地址欄中 #?

• 地址欄中，經常出現#，是什么作用，能不能去掉#？

• hash模式：地址欄包含#符號，#以后的不能唄后臺獲取

• history模式：具對url歷史記錄進行修改的功能

• 在微信支付、分享url作為參數傳遞時，#不能滿足需求

• history需要后臺配合，處理404的問題

通常不建議用hash模式的地址欄，原因是其中的#不能被獲取或者當成參數傳遞，這時候需要把hash模式更改為history模式。

在index.js中配置即可

export default new Router({

mode:'history', //把模式指定為history就可以去掉 #

})

router 實現子頁面跳轉再返回

創建A、B的子頁面A1、B1 .vue結尾的文件

頁面中編輯

index.js中的配置與邏輯

import A1與B1

A1屬于A所以在A的跳轉配置中加入字段

children:[{ //常用于父框架中嵌入子頁面的操作，會保留父框架的內容嵌入子框架

????path: '/a1',

? ? ?name: 'A1',

? ? ?component: A1

},{}];

并在A頁面的<router-link to="/A1">標簽加入跳轉路徑

<router-view></router-view>：用于掛載子頁面的位置，必須在父頁面中添加這個標簽，才能把要掛載的子頁面顯示到<router-view></router-view>中

實現簡單的頁面跳轉

主要是通過index.js的配置實現

先創建a、b兩個vue頁面分別編輯內容并綁定跳轉鏈接

在first中定義兩個跳轉標簽，分別對應a、b頁面

<router-link to=""> ：用于跳轉， to 對應 index.js 中 component 配置好的路徑

書寫格式：

<router-link to="/a"> 轉向A</router-link>

?<router-link to="/b">轉向B</router-link>

index.js的配置項

一定要import三個頁面的路徑

import First from '@/components/first.vue'

import A from '@/components/a.vue'

import B from '@/components/b.vue'

然后就是頁面調用的配置項

? routes: [

? ? { //first首頁的配置項

? ? ? path: '/',

? ? ? name: 'first',

? ? ? component: First

? ? },

? ? {//a頁面的配置項

? ? ? path:'/a',

? ? ? name:'a',

? ? ? component:A

? ? },{//b頁面的配置項

? ? ? path:'/b',

? ? ? name:'b',

? ? ? component:B

? ? }

? ]

vue-cli項目的配置與頁面綁定（第一階段）

先啟動服務

d: - cd testcli（進入testcli文件中） - dir（查看testcil的文件目錄中的文件） - cd test1（進入test1項目中） - npm run dev（運行項目）

獲取到?localhost:8080/#/?并在瀏覽器中訪問

創建自己的vue helloword頁面

使用編譯器打開test1項目找到src

src文件用于存放頁面相關的文件如 頁面vue文件、配置跳轉的index.js文件

components：components文件夾下是存放自定義vue頁面的

router：router文件夾中有一個index.js用于首頁跳轉的配置，默認配置，配置以后會指定首頁頁面為哪一個

配置子的vue helloword頁面

在index.js中先用import引入我們創建的first.vue

import First from '@/components/first.vue'

//First ：是命名這個引用，業內默認首字母大寫? @：是相對路徑

routes: [

? ? {

? ? ? path: '/', //代表根目錄根節點

? ? ? name: 'First', //當前跳轉的命名備注

? ? ? component: First //剛剛我們import的命名

? ? }

? ]

創建vue-cli搭建起來的項目

命令行創建：vue init webpack （projectName）

init：創建

webpack：模板（一般都是用webpack非常的常用）

（projectName）：項目名稱，注意一定要小寫

需要用戶干預的地方

? Project name test1

//項目名稱確認，一般跟文件名稱想用默認就行，必須全小寫（回車下一項）

? Project description A Vue.js project

//給當前項目添加說明、描述，類似readme

? Author name <***@qq.com>

//作者（回車下一項）

? Vue build standalone

//選擇運行和編譯是否同步進行 默認就行（回車下一項）

? Install vue-router? Yes

//選擇路由模式，這里必須選擇? y = yes，如果不選擇yes頁面跳轉會很生硬，不流暢

? Use ESLint to lint your code? No

//選擇代碼的規范，規范格式，書寫等方面，新手寫demo建議選擇no，正規的項目開發一定要選擇yes，有利于規范團隊開發的可視化（后期可以改變狀態）

? Set up unit tests Yes

//是否需要單元測試（回車下一項）

? Pick a test runner jest

//選擇單元測試（回車下一項）

? Setup e2e tests with Nightwatch? Yes

//也是單元測試（回車下一項）

? Should we run `npm install` for you after the project has been created? (recommended) npm

//否應該在項目創建后為您運行' npm安裝' (推薦)npm? ? （ 默認就好）

運行我們的vue項目

運行指令：npm run dev（在項目根目錄運行）

運行結束后會返回一個訪問路徑：http://localhost:8080

瀏覽器訪問看到vue歡迎頁面就可以了，這里跟tomcat有異曲同工之妙

cnpm的鏡像使用配置指令

npm install -g cnpm --registry=https://registry.npm.taobao.org

驗證cnpm是否安裝成功 cnpm -v

出現版本號就代表成功了

安裝好后通過 cnpm -install -gd vue-cli 安裝vue腳手架

-gd的意思是安裝到全局且開發與應用環境當中

安裝完成后驗證vue是否安裝成功的執行指令

vue -V V一定為大寫注意

出現版本號就代表成功了

vue-cli的安裝

npm與cnpm的區別

• 
  

  • cnpm 國內淘寶鏡像的npm管理器用于替代國外服務器

  • npm（node package manager） 是 nodejs包管理器

?-g 全局安裝（global）

????npm root -g 查看全局安裝的文件夾位置

vue-cli2安裝

自動安裝

????npm install -g vue-cil（默認安裝指令）

????cnpm install -g vue-cil（鏡像安裝指令，需要配置淘寶鏡像）

手動淘寶鏡像安裝

????npm install -gd express --registry=http://registry.npm.taobao.org

淘寶鏡像資源永久設置指令：

npm config set registry http://registry.npm.taobao.org

nodejs的安裝

????nodejs.cn //安裝網址根據機型選擇對應的版本安裝

????下載好后一直下一步就可以了，記下安裝路徑用于環境變量配置一般放到C://

????在phth的環境變量中添加安裝好的nodejs目錄路徑方便在系統的任何地方都能使用nodejs

????cmd驗證nodejs與npm的版本

????node -v 與 npm -v

常用的dos命令（腳手架的使用過程中必須會的命令）

1. cd 打開文件夾

2. md 創建新文件夾

3. dir 查看文件夾內容

4. cd..返回上一級文件夾

舉栗子：

• d:（切換到d盤）

• md vuecli2（創建一個叫vuecli2的文件夾）

• cd vuecli2（進入到vueclis的文件夾中）

• dir（查看當前所在的文件夾的信息）

• cd..（返回上一級）
  

  
  

子路由 children：[{

path:'/A1'

component:A1

},

]