一、環境搭建
1、安裝node （node -v查詢版本號）
node 安裝 ---- 官網下載安裝
2、安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安裝 webpack，以全局的方式安裝
npm install webpack -g
(這里因為外網限制速度很慢，可以先Ctrl+C取消安裝，執行下面語句，再執行上面胡語句，你就會發現速度快上很多
npm config set registry https://registry.npm.taobao.org
)
4、全局安裝vue以及腳手架vue-cli（3.0以后使用的不是vue-cli，之前已經安裝vue-ci的，需要先執行 npm uninstall vue-cli -g 進行卸載）
npm install -g @vue/cli@3.0 .0 （使用 @vue/cli -V 查詢版本號，安裝3.0需要node版本在8.0+及以上）
5、創建vue項目 element-manage-system是你起的項目名稱
vue create element-manage-system
這里如果你是第一次用3.0版本的話，只有兩個選項，
這里是 讓你選的，第一個是默認配置，一般選第二個，自己配置，這里選擇最后一個
當你選擇后會出現上面圖上的東西，這里你可以自由選擇用哪些配置，按上下鍵 選擇哪一個，按空格鍵確定，所有的都選擇好后，按enter鍵進行下一步
是否使用history，項目中多使用hash值方式，故輸入N回車
下一步之后問詢問你安裝哪一種 CSS 預處理語言，你隨意選擇，我是一直用的less
上面這個是問你選擇哪個自動化代碼格式化檢測，配合vscode編輯器的 Prettier - Code formatter插件，推薦選擇 ESLint + Standard config
這里第一個選項是問你是否保存剛才的配置，選擇確定后你下次再創建新項目 就有你以前選擇的配置了，保留默認即可
上邊這倆意思問你想babel,postcss,eslint這些配置文件放哪？ 第一個是：放獨立文件放置 第二個是：放package.json里 這里推薦放單獨配置文件，推薦選第一個
上邊倒數第二行問你是否將以上這些將此保存為未來項目的預配置嗎？ 最后一個是描述項目，你隨意選擇，點擊確定就開始下載模板了
見到這個提示就表示已經創建成功啦
查看項目結構
6、運行當前項目
npm run serve
啟動服務npm run serve, 這里發現少了vue.config.js文件，那配置怎么搞？
在項目根目錄新增vue.config.js，配置如下
module.exports = {
/* 部署應用包的基本URL */
/* baseUrl 從 Vue CLI 3.3 起已棄用 ，請使用publicPath */
// baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
/* 生產環境構建文件的目錄 defalut: dist */
outputDir: "dist",
/* 放置生成的靜態文件目錄（js css img） */
assetsDir: "static",
/* 指定生成的index.html 輸出路徑 相對 default: index.html */
indexPath: "index.html",
/* 指定生成文件名中包含hash default: true */
filenameHashing: true,
/* 多頁模式下 */
/* pages: {
index: {
// page 的入口
entry: "src/index/main.js",
// 模板來源
template: "public/index.html",
// 在 dist/index.html 的輸出
filename: "index.html",
// 當使用 title 選項時，
// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
// title: "Index Page",
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "index"]
},
// 當使用只有入口的字符串格式時，
// 模板會被推導為 `public/subpage.html`
// 並且如果找不到的話，就回退到 `public/index.html`。
// 輸出文件名會被推導為 `subpage.html`。
// subpage: "src/subpage/main.js"
} */
/* 是否保存時 lint 代碼 */
lintOnSave: process.env.NODE_ENV === "production",
/* 是否使用編譯器 default: false */
runtimeCompiler: false,
/* 默認babel-loader會忽略node_modules中的文件，你想顯示的話在這個選項中列出來 */
// transpileDependencies: [],
/* 生產環境的source map */
productionSourceMap: true,
// crossorigin: "",
integrity: false,
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
devServer: {
port: 8080,
host: "0.0.0.0",
https: false,
// 自動啟動瀏覽器
open: false,
proxy: {
"/api": {
//代理路徑 例如 https://baidu.com
target: "https://baidu.com",
// 將主機標頭的原點更改為目標URL
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
再次執行 npm run serve ，服務起來了，這是可以在瀏覽器看一下頁面，完美
6、安裝element-ui
npm i element-ui -S (cd 進入到項目根目錄)
二、項目初期搭建
上面已經正常啟動了項目，下面說明一下公共配置
1、main.js(主文件)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import Axios from "axios";
Vue.config.productionTip = false;
Vue.use(ElementUI)
Vue.prototype.axios = Axios
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
2、router(路由跳轉配置)
router作用：簡單理解就是幫助組件之間跳轉用的。
這里為了性能都采用懶加載，還有這里不管先登陸登陸頁面 默認跳轉組件為 Main.vue
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
},
{
path: "/JSON",
name: "JSON",
component: () =>
import(/* webpackChunkName: "about" */ "./views/JSON.vue")
}
]
});
3、axios
axios作用：axios主要是用於向后台發起請求的，還有在請求中做更多是可控功能。
npm install axios 執行安裝，完成后配置main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import Axios from "axios";
Vue.config.productionTip = false;
Vue.use(ElementUI)
Vue.prototype.axios = Axios
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
基本的配置就完成了，下面可以開始進行開發啦
接口數據模擬
很多時候前端在后端接口還沒有開發完成的時候，需要前端自己模擬數據，這個其實也很簡單。
首先在public文件夾下新建api/user.json文件，當然新建的文件夾和json文件名字是可以隨意命名的。
{
"status": 200,
"data": [
"Jack",
"Tom",
"Rose"
]
}
<template>
</template>
<script>
export default {
name: "JSON",
mounted() {
this.axios.get('/api/user.json').then((res) => {
console.log(res, 'success')
}).catch((err) => {
console.log(err, 'error')
})
}
}
</script>
<style scoped>
</style>
APP.Vue新增JSON.Vue入口
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/JSON">JSON Data</router-link> // 新增入口
</div>
<router-view />
</div>
</template>
配置router.js文件
{
path: "/JSON",
name: "JSON",
component: () =>
import(/* webpackChunkName: "about" */ "./views/JSON.vue")
}
瀏覽器打開頁面，就能見到JSON的入口啦
切換JSON Data，可能F12的Network，可以看到user.json 的數據
