VUE-CLI學習
vue CLI安裝 與 新建模板
vue -V
vue help
vue help [cmd]
安裝CLI
npm install -g vue-cli[@2.9.6]
用法：
vue init <template-name> <project-name>
例如：
vue init webpack myweb
執行以上命令結果如下：
Project name myweb // 項目名稱
Project description A Vue.js project //項目描述
Author //作者
Vue build standalone //vue使用安裝編譯插件 選擇帶包含compiler的選項
Install vue-router? Yes // 是否安裝路由 這 Yes
Use ESLint to lint your code? No //ES6語法，No
Set up unit tests No //測試,NO
Setup e2e tests with Nightwatch? No
Should we run `npm install` for you after the project has been created? (recommended) npm
等待初始化項目…
# Project initialization finished!
# ========================
To get started:
cd myweb
npm run dev
顯示如上內容，安裝成功！
cd myweb
進入項目這不執行 npm run dev命令。
這裏介紹 兩個 運行項目的 命令：
npm run dev //開發時使用的
npm run build //項目發佈時使用
package.json基本介紹
我們進入myweb根目錄打開文件 package.json
下面是文件中的部分內容：
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
}
}
scripts對象：
devstart對應npm run devdev 和 start 使用效果是一樣的。根據你的個人習慣選擇命令即可。build對應npm run build命令，發佈時打包時用到
dependencies 工程依賴對象下,現在有兩個依賴：
vue webpack模板老 2.5.2版本版本較低，我們更新下。
如上圖最新穩定版是2.5.18
更新後的代碼如下：
"dependencies": {
"vue": "2.5.18",
"vue-router": "^3.0.1"
}
建議去掉 ^ 精確使用版本號。
命令的使用
npm run dev 運行項目
我們已經瞭解命令的作用，鍵入命令運行下項目：
進入 項目目錄
cd myweb
npm run dev
結果如下：
C:\Users\mabh\myweb>npm run dev
> [email protected] dev C:\Users\mabh\myweb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 7078ms 15:51:13
I Your application is running here: http://localhost:8080
編譯我們所有組件、文件、生成臨時的web包。
由於內置了 web Server，我們可以直接通過 給的地址直接訪問即可：http://localhost:8080
注意：npm start 不用帶 run, dev 和 build都需要加上 run。這是他們的使用區別。
npm run build 發佈項目
npm run build
結果如下：
C:\Users\mabh\myweb>npm run build
> [email protected] build C:\Users\mabh\myweb
> node build/build.js
Hash: 2830cfa3407a7dc731c2
Version: webpack 3.12.0
Time: 11133ms
Asset Size Chunks Chunk Names
static/js/vendor.76d5237ed1bbf9f3775e.js 113 kB 0 [emitted] vendor
static/js/app.eb58cdd175306f505211.js 11.6 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 828 bytes [emitted]
static/js/vendor.76d5237ed1bbf9f3775e.js.map 560 kB 0 [emitted] vendor
static/js/app.eb58cdd175306f505211.js.map 22.2 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 507 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
編譯完成後會 文件放在工程 dist 目錄下。
爲我們生成了 index.html 頁面。 css 和 js 文件 都是被加密 。打開文件可以看到，可讀性非常的差因爲被混淆過了
引入 Bootstrap4
cd myweb
npm install bootstrap --save --save-exact
- **
-- save: **把bootstrap作爲依賴庫存到 package.json文件中。 - **
--save-exact：**精確版本號，也就是 刪除了 ^
執行完後 package.json文件：
"dependencies": {
"bootstrap": "4.1.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
編輯 main.js 是這個項目的入口文件
引入bootstrap 如下：
import bootstrap4 from 'bootstrap/dist/css/bootstrap.min.css'
編輯 App.vue template 節點
如下測試內容：
<template>
<div id="app">
<img src="./assets/logo.png">
<hr>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<hr>
<router-view/>
</div>
</template>
被hr標籤包裹的內容是新的內容。爲了測試bootstreap是否被正確引入。這些按鈕是bootstreap的最基本寫法。
使用 npm start運行下：
npm start
結果：
C:\Users\mabh\myweb>npm start
> [email protected] start C:\Users\mabh\myweb
> npm run dev
> [email protected] dev C:\Users\mabh\myweb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 17477ms 16:32:23
I Your application is running here: http://localhost:8081
使用 如下命令 瀏覽下：
http://localhost:8081
使用 Ajax庫-axios
基於Promise的HTTP客戶端，用於瀏覽器和node.js
特徵
- 從瀏覽器生成XMLHttpRequests
- 從node.js發出http請求
- 支持Promise API
- 攔截請求和響應
- 轉換請求和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支持防範XSRF
瀏覽器支持：
安裝 axios 和 vue-axios
cd myweb
npm install --save --save-exact axios vue-axios
註冊組件
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
編輯組件
src\components\HelloWorld.vue
<template>
<div class="hello">
<pre>{{ content }}</pre>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
content: ""
}
},
mounted(){
this.axios.post("http://api.komavideo.com/news/list").then((response) => {
this.content = response.data;
});
}
}
</script>
<!-- 添加“scoped”屬性以僅將CSS限制爲此組件 -->
<style scoped>
</style>
運行
npm run dev
C:\Users\mabh\myweb>npm run dev
> [email protected] dev C:\Users\mabh\myweb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 9885ms 17:13:27
I Your application is running here: http://localhost:8080
http://localhost:8080 打開運行看下吧，如下圖：
自定義CSS樣式
在如下 src\assets\my.css目錄新建css文件
.myclass1{
color: red;
border: 1px solid blue;
}
編輯App.vue
在script中引入 css文件，注意文件路徑是相對的
import './assets/my.css'
template節點中添加如下：
<div class="myclass1">這是自定義CSS樣式</div>
打開瀏覽器看下吧。你會發現已經發生了變化。
原因是因爲 npm run dev 會自動編譯自動重啓。
組件的結構
組建文件夾
{myproject}/src/components/*
組件寫法
- template: 組件 html內容
- script:組件js腳本（ES6）
- style: 組件css樣式單
實戰演習
<template>
<div class="container">
<h1>{{ msg }}</h1>
</div>
</template>
// import ...
export default{ //ES6寫法輸出改組件
name:"Hello World",
data(){
return {
msg:"Welcome to Your Vue.js App"
}
}
}
<!-- 添加“scoped”屬性以僅將CSS限制爲此組件 -->
<style scoped>
h1 {
font-weight:normal;
color:red;
}
</style>