目錄
前言
一、安裝vue-cli依賴
1、使用yarn下載vue-cli
2、使用npm下載
3、檢查一下是否下載成功
二、創建項目
1、創建項目，my-app是項目名稱
2、 這里選擇vue 2，藍色表示選中的。
3、啟動項目
三、下載項目依賴
四、配置項目
1、修改eslint（關閉代碼編寫不規范檢查）
2、初始化文件
3、全局引入element-ui
4、基礎路由配置
總結
前言
?????????使用vue-cli搭建一個簡單的vue.在下載vue-cli之前需要先安裝node.js和npm.而且最好是對應版本的npm，建議nodejs下載v16.13.2，對應的npm是8.1.2。
????????具體步驟參考：http://t.csdnimg.cn/h4GrH
一、安裝vue-cli依賴
1、使用yarn下載vue-cli
下載yarn
npm i -g yarn
?
安裝vue-cli依賴
?yarn global add @vue/cli
?
2、使用npm下載
npm install -g @vue/cli
如果下載慢的話可以先更改npm的鏡像
npm config set registry??https://npm.aliyun.com/
然后在重新下載一下。
3、檢查一下是否下載成功
?vue -V
?可以查到版本號，并且是5開頭的說明安裝成功安裝正確了?
如果下載了，但是還是查看不到版本信息，還是和沒有安裝的一樣，可能是因為環境變量的原因，可以參考下面的解決辦法：
【環境-0】Node js 本地環境安裝及設置（親測） - 知乎
二、創建項目
1、創建項目，my-app是項目名稱
vue create my-app
2、 這里選擇vue 2，藍色表示選中的。
?
點開鏈接說明創建成功了。?
?
3、啟動項目
npm run serve?
?
?
點開鏈接說明創建成功了。??
三、下載項目依賴
1、下載axios
npm install axios@0.27.2
2、下載echarts
npm i echarts@5.1.2
3、下載element-ui
npm i element-ui -S
4、下載vue-router
npm i vue-router@3.6.5
5、下載vuex
npm i vuex@3.6.2
6、下載mockjs
npm i mockjs
?7、下載less/less-loader
npm i less@4.1.2
npm i less-loader@6.0.0
四、配置項目
1、修改eslint（關閉代碼編寫不規范檢查）
在vue.config.js文件中添加lintOnSave:false,
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//關閉eslint校驗lintOnSave:false,
})2、初始化文件
在根目錄下新建如下文件夾：
（1）新建router文件夾：
該文件夾下新建index.js文件：路由配置文件
（2）新建api文件夾
- 該文件夾下新建mockServeData文件夾，存放mock模擬數據
- 該文件夾下新建index.js文件：前端api接口
- 該文件夾下新建mock.js文件：mock模擬后端請求數據
（2）新建store文件夾
（2）新建utils文件夾：項目工具文件
3、全局引入element-ui
在main.js中添加如下：
### import ElementUI from 'element-ui'; //導入
import 'element-ui/lib/theme-chalk/index.css';//導入相關css
import App from './App.vue';Vue.use(ElementUI);//全局注入new Vue({el: '#app',render: h => h(App)
});4、基礎路由配置
1、在main.js文件中導入vue-router
//導入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)2、創建路由組件
在src文件夾中新建一個views包含所有組件，
創建Home組件：
<template>
<h1>我是home</h1>
</template>
<script>
export default{data(){return{}}
}
</script>創建User組件：
<template><h1>我是user</h1></template><script>export default{data(){return{}}}</script>3、將組件和路由映射
在router/index.js中添加
const routes = [{ path: '/home', component: Home },{ path: '/user', component: User }]4、創建router實例
在router/index.js中添加
const router = new VueRouter({routes // (縮寫) 相當于 routes: routes
})5、創建和掛載根實例
在router/index.js中添加
export default router
//將router對象作為默認導出，在其他導入時直接導入router即可在main.js中添加如下內容：
import router from "./router"
new Vue({router,render: h => h(App),
}).6、路由出口，將路由匹配到的組件渲染在html中
在APP.vue中：
<template><div id="app"><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view></div>
</template><script>export default {name: 'App'}
</script>總結
到這里vue項目及其配置都已經創建和配置成功了。
