目錄
- Vue-CLI 專案搭建
- CLI
- CLI創建專案
- 方式一：命令列創建-vue create
- 方式二：使用圖形化界面-vue ui
- 如何洗掉CLI預設
- Vue專案目錄及運行
- 運行
- package.json中
- 目錄
- 運行
- es6語法之匯入匯出
- 匯入匯出包
- 定義并使用組件
- 集成Bootstrap，jQuery，Elementui
- 下載Bootstrap和jQuery
- 配置Bootstrap和jQuery
- 下載elementui
- 配置elementui
- 使用axios與后端互動
Vue-CLI 專案搭建
CLI
CLI (@vue/cli) 是一個全域安裝的 npm 包，提供了終端里的 vue 命令，它可以通過 vue create 快速搭建一個新專案，或者直接通過 vue serve 構建新想法的原型，你也可以通過 vue ui 通過一套圖形化界面管理你的所有專案，
沒有安裝好cli腳手架的可以繼續安裝：
??Vue CLI 官網檔案
??Node.js安裝詳細教程
安裝好腳手架后，我在安裝的程序中發現使用npm自帶的源太慢了，可以切換源
在nodejs的環境上裝vue-cli：vue腳手架
-npm install -g cnpm --registry=https://registry.npm.taobao.org
-以后使用cnpm替換掉npm即可：下載速度快
-cnpm install -g @vue/cli # 速度慢，淘寶寫了工具 cnpm，完全替換npm的功能，使用cnpm回去淘寶鏡像站下載，速度快
我裝的最新版本nodejs，如果想裝舊版本參考下檔案：
??舊版本：https://nodejs.org/zh-cn/download/releases/
Node第一個程式：Hello world
CLI創建專案
方式一：命令列創建-vue create
運行以下命令來創建一個新專案：
vue create item
選擇Manually，手動選擇功能，然后回車
使用空格選擇，Babel、Router、Vuex
Babel：es版本轉換，比如es6語法在瀏覽器不支持，那么它會幫我們轉換到支持的版本
Router：路由跳轉
Vuex：狀態管理器(存資料)
Vue版本選擇
Router選擇
選擇package管理
保存配置選擇作為歷史選擇
配置名
成功：不成功建議使用管理員創建就行了
方式二：使用圖形化界面-vue ui
可以通過 vue ui 命令以圖形化界面創建和管理專案：
vue ui
上述命令會打開一個瀏覽器視窗，并以圖形化界面將你引導至專案創建的流程
如何洗掉CLI預設
這里的預設不需要如何洗掉？按照如下路徑找到.vuerc打開洗掉即可
C:\Users\3547
打開.vuerc
再次創建專案就沒有預設了
Vue專案目錄及運行
運行
- 運行專案方式一：在專案路徑下輸入npm run serve
- 運行專案方式二：pycharm運行
package.json中
"scripts": {
"serve": "vue-cli-service serve", # 運行專案
"build": "vue-cli-service build", # 編譯專案成html，css，js
"lint": "vue-cli-service lint" # 代碼格式化
},
目錄
# 目錄介紹
-myfirstvue # 專案名字
-node_modules # 放著當前專案所有的依賴，可以洗掉，洗掉專案運行不了了,npm install 把該專案的依賴再裝上，把專案發給別人，提交到git上，檔案夾要刪掉
-public # 檔案夾
-favicon.icon # 小圖示
-index.html # 單頁面開發，整個專案就這一個頁面，以后不要動
-src # 以后咱們都是在這里面寫東西
-assets # 放靜態資源，圖片，js，css
-components # 組件，xx.vue組件，小組件，給頁面組件用
-HelloWorld # 提供的默認組件，示例
-router # vue-router就會有這個檔案夾
-index.js # vue-router的js代碼
-store # vuex 就會有這個檔案夾
-index.js # vuex 的js代碼
-views # 組件，頁面組件
-About
-Home # 默認提供了示例組件
-App.vue # 根組件
-main.js # 專案的入口于
-.gitignore # git的忽略檔案
-babel.config.js # babel配置
-package.json # 專案的所有依賴，類似于 requirements.txt,不要刪，npm install根據這個檔案下載第三方模塊
-vue.config.js # vue的配置
es6語法之匯入匯出
類似python中的匯入包、模塊，JS模塊化開發，在其他JS中匯入使用
匯入語法：
import 自定義名字 from '路徑'
Eg：import Vue from 'vue' //內置的
//如果是自定義的寫自己的路徑
匯出語法：
匯出單個物件：export default 方法名/變數名
eg：export default 變數名
export default 方法名
匯出多個物件：export default {key:value,key1:value1···} //key自定義名字，value物件js檔案中的方法名或變數名
eg：export default {name:name,printName:printName}
//key值也可以省略
export default {value,value1···}
注意：必須先匯出之后才能匯入使用
demo：
//匯出：
let name = 'HammerZe'
function printName() {
console.log(name)
}
// 把物件匯出
export default {name:name,printName:printName}
//匯入
//匯出多個物件再匯入使用的時候就可以通過物件.方法/變數使用
import settings from '路徑'
settings.name
settings.printName()
匯入匯出包
匯入出包和上面一樣，匯入包只匯入到包這一層就可以了，比如：info包下的info.js檔案匯出，匯入的路徑只寫到info就可以了
//匯出
let name = 'HammerZe'
let age = 18
export default {name,age}
//匯入
import info from ./info
info.name
info.age
定義并使用組件
定義組件包括以下三部分：
第一部分：
-<template></template> # 寫原來模板字串``,html內容
第二部分：
-<script></script> # 寫export default匯出的物件
eg：
-<script>
export default {
data(){retrun {
name:'mycomponent'
}},
methods:{},
}
</script>
第三部分：
-<style scoped> # scoped 樣式只在當前組件中生效
</style>
組件在專案中如何使用，如下：
自定義組件mycomponent.vue
<template>
<div >
<h2>{{name}}</h2>
<button @click="handleClick">百度一下</button>
</div>
</template>
<script>
export default {
name: "mycomponent",
data(){
return {
name:'HammerZe'
}
},
methods:{
handleClick(){
window.location.href="http://www.baidu.com"
}
}
}
</script>
<style scoped>
h2{
background-color: tomato;
align-content: center;
}
button{
background-color: aqua;
}
</style>
重寫AboutView.vue顯示自定義組件
<template>
<div>
<!--用在div里-->
<mycomponent></mycomponent>
</div>
</template>
<script>
// @ is an alias to /src
import mycomponent from '@/components/mycomponent.vue'
export default {
name: 'AboutView', //組件名一般和檔案名一致
components: {
//注冊自定義組件
mycomponent
}
}
</script>
集成Bootstrap，jQuery，Elementui
下載Bootstrap和jQuery
npm install bootstrap@3 -S
npm install jquery -S
配置Bootstrap和jQuery
Bootstrap配置
# 在main.js中配置
// bootstrap的配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
jQuery配置
# vue.config.js中配置
const {defineConfig} = require('@vue/cli-service')
const webpack = require("webpack");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
},
})
下載elementui
npm install element-ui -S
配置elementui
# 在main.js 配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用在組件中使用就可以了~
使用axios與后端互動
# 第一步，安裝
npm install axios -S
# 第二步：main.js 配置
# 匯入
import axios from 'axios'
# 類的原型中放入變數
Vue.prototype.$axios = axios;
# 第三步：在任意組件中使用
# this.$axios 就是axios物件
this.$axios.get().then(res=>{})
如果，沒有在main.js中配置，使用如下
import axios from 'axios'
axios.get('').then(res=>{})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458561.html
標籤：其他
上一篇：夯實基礎中篇-圖解作用域鏈和閉包