CLI
CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。它可以通過 vue create 快速搭建一個新項目，或者直接通過 vue serve 構建新想法的原型。你也可以通過 vue ui 通過一套圖形化界面管理你的所有項目。
沒有安裝好cli腳手架的可以繼續安裝：
安裝好腳手架后，我在安裝的過程中發現使用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=>{})