摘要:在中聲明,方便全局引用書寫方法同方法一致。查閱配置行為。查閱配置代理五備注路徑表示文件夾中已經(jīng)配好的路徑
在vue3.0開始普及的時(shí)候,同時(shí)也收到了消息得知,從前使用vue2.0的各種依賴包在今后的更新中不再適用老版的vue,因此在新的項(xiàng)目中使用了vue3.0版本,以下是配置vue3.0的基礎(chǔ)功能
安裝
一、 安裝vue3.0
npm install -g @vue/cli
or
yarn global add @vue/cli
查看版本:vue -V 顯示應(yīng)該是3.0以上的版本
二、創(chuàng)建項(xiàng)目
2.1 代碼創(chuàng)建
vue create XXX(項(xiàng)目名稱) default 是 使用默認(rèn)配置 Manually select features 是 自定義配置
2.2 界面創(chuàng)建
vue ui 自動(dòng)打開瀏覽器顯示界面(部分瀏覽器不支持顯示)
創(chuàng)建新項(xiàng)目:
使用
通過:npm run serve啟動(dòng)程序
一、 vuex的使用
1.1 依照2.0的使用方法:
根據(jù)2.0的原始方法,將vuex分為state.js、mutation.js、getter.js、action.js四個(gè)文件進(jìn)行vuex的修改。
在main.js中聲明store,方便全局引用:
import store from "./store/index";
Vue.prototype.$store = store;
書寫方法同2.0方法一致。
1.2 按照3.0的使用方法:
原理:等同于2.0,只是將4個(gè)文件放在了一起,可進(jìn)行拆分或者直接修改文件。
state.js:
const state = { test: "" // 這是一個(gè)測(cè)試數(shù)據(jù) } export default state;
mutation.js
const mutations = { changeTest(state, payload) { state.test = payload.test; } } export default mutations;
getter.js
const getters = { getTest(state) { return state.test; } } export default getters;
action.js
const actions = { changeTest(store, payload) { store.commit({ type: "changeTest", test: payload }) } } export default actions;
index.js -------- 將對(duì)應(yīng)的四個(gè)文件進(jìn)行整合
import Vue from "vue"; import Vuex from "vuex"; import actions from "./action"; import getters from "./getter"; import mutations from "./mutation"; import state from "./state"; Vue.use(Vuex); export default new Vuex.Store({ state, actions, getters, mutations });
二、跳轉(zhuǎn)
同樣在main.js文件中聲明:import router from "./router";
(在安裝項(xiàng)目時(shí),如果手動(dòng)選擇了router,不需要手動(dòng)添加聲明)
三、 數(shù)據(jù)請(qǐng)求
這里采用的是2.0的數(shù)據(jù)請(qǐng)求模式:
3.1 將2.0框架中services文件夾復(fù)制到src文件夾下。
3.2 下載對(duì)應(yīng)的ajax依賴。
cnpm install axios --save
3.3 新建目錄services
配置axios文件 ------- 已解決前端跨域
import axios from "axios"; import baseUrl from "../config"; // 這里設(shè)置了一個(gè)文件作為所有請(qǐng)求的基礎(chǔ)ip地址 // 添加請(qǐng)求攔截器 var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.interceptors.request.use(function (config) { if (config.method === "post" || config.method === "put" || config.method === "delete") { // POST傳參序列化 // console.log(config.data); // config.data = Qs.stringify(config.data); // config.data = Qs.stringify(config.data); } return config; }, function (error) { // 預(yù)處理請(qǐng)求錯(cuò)誤(error) return Promise.reject(error); }); // 添加響應(yīng)攔截器 axios.interceptors.response.use(function (response) { // 預(yù)處理響應(yīng)數(shù)據(jù)(response)如果數(shù)據(jù)當(dāng)中有不要的部分,就截留 // console.log(response) return response; }, function (error) { // 預(yù)處理響應(yīng)錯(cuò)誤(error) // alert(error); return Promise.reject(error); }); export default function(url, { // 不傳時(shí),默認(rèn)參數(shù) method = "get", timeout = 180000, data = {}, cancelToken = "", headers = {"Content-Type": "application/json"}, // application/x-www-form-urlencoded;charset=UTF-8; responseType = "json" }) { const config = { method: method, timeout: timeout, url: url, // 如果URL是完整的,包含域名,則下方的域名不會(huì)被拼接 baseURL: baseUrl.URL_CNODEJS, // 域名,在最外層的config.js當(dāng)中可以修改,請(qǐng)求目標(biāo)服務(wù)器域名配置,結(jié)合我們自己的項(xiàng)目,在項(xiàng)目放置到服務(wù)器上時(shí),就是將域名替換成192.168.1.3 data: data, canelToken: cancelToken, // 關(guān)閉請(qǐng)求 headers: headers, responseType: responseType }; return axios(config); }
config.js
// 請(qǐng)求目標(biāo)服務(wù)器域名配置 const DOMAIN_NAME = { URL_CNODEJS: "http://192.168.1.155:8040" // 測(cè)試環(huán)境 }; export default DOMAIN_NAME;
server.js ----- 跟axios文件同目錄,將所有請(qǐng)求寫在這里
import axios from "../services/axios"; const server = { getTest() { return axios("bservice/test", { method: "get" }) } } export default server;
3.4 在main.js文件引入:
import server from "../src/services/server"; Vue.prototype.$server = server;
3.5 使用
this.$server.getTest().then((res) => { // 請(qǐng)求測(cè)試 console.log(res.data) }).catch(err => { console.log(err.message); })
四、打包
由于vue-cli項(xiàng)目中已經(jīng)沒有config文件夾,需要在根目錄下創(chuàng)建vue.config.js進(jìn)行打包路徑的設(shè)置:
網(wǎng)上有很多推薦的配置,大家可以隨便找一個(gè)配置文件進(jìn)行測(cè)試,我用了以下文件:
module.exports = { baseUrl: "./", outputDir: "dist", lintOnSave: true, runtimeCompiler: true, //關(guān)鍵點(diǎn)在這 // 調(diào)整內(nèi)部的 webpack 配置。 // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // 配置 webpack-dev-server 行為。 devServer: { open: process.platform === "darwin", host: "0.0.0.0", port: 8080, https: false, hotOnly: false, // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理 proxy: null, // string | Object before: app => {} } }
五、備注
路徑:@表示src文件夾(/node_modules/@vue/cli-service/lib/config/base.js中已經(jīng)配好的@路徑)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/105882.html
摘要:前言都到了,所以是時(shí)候玩轉(zhuǎn)一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了,導(dǎo)致正確的不能用。打開終端,切換到根路徑文件里面修改為方法二是默認(rèn)路徑修改了路徑會(huì)出現(xiàn)錯(cuò)誤。按上面的方法修改完,再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....
摘要:借助,我們通過非常簡單的問答形式,方便地初始化一個(gè)工程,完全不需要擔(dān)心繁復(fù)的配置等等。簡單來說,就是不僅僅能初始化工程,理論上能夠初始化一切工程,包括,等等等等,只要你有一份能夠運(yùn)行的模板,就能夠通過進(jìn)行工程的初始化。 相信對(duì)于大部分使用過VueJS的同學(xué)來說,vue-cli是他們非常熟悉的一個(gè)工具。借助vue-cli,我們通過非常簡單的問答形式,方便地初始化一個(gè)vue工程,完全不需要...
摘要:那么,我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化,幫開發(fā)者已經(jīng)解決了,甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉庫由原有獨(dú)立的 github 倉庫遷移到了 vue 項(xiàng)目下 ...
摘要:那么,我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化,幫開發(fā)者已經(jīng)解決了,甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉庫由原有獨(dú)立的 github 倉庫遷移到了 vue 項(xiàng)目下 ...
摘要:那么,我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化,幫開發(fā)者已經(jīng)解決了,甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉庫由原有獨(dú)立的 github 倉庫遷移到了 vue 項(xiàng)目下 ...
摘要:但高度封裝的帶來方便的同時(shí),很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu),以至于當(dāng)使用需要手動(dòng)配置一些東西如編譯實(shí)現(xiàn)代碼壓縮,移動(dòng)端適配等配置的時(shí)候往往無從下手。廢話不多說,下面我們來看看如何基于模仿實(shí)現(xiàn)項(xiàng)目工程化。 從零搭建vue-cli 原創(chuàng)不易,如需轉(zhuǎn)載請(qǐng)聯(lián)系作者并注明出處 vue-cli的出現(xiàn)為vue工程化前端開發(fā)工作流提供了開箱即用的構(gòu)建配置,減輕了煩人的webpack配置流程。但高度封...
閱讀 720·2021-11-24 10:30
閱讀 1254·2021-09-24 09:48
閱讀 3074·2021-09-24 09:47
閱讀 3588·2019-08-29 17:11
閱讀 2875·2019-08-29 15:38
閱讀 2270·2019-08-29 11:03
閱讀 3594·2019-08-26 12:15
閱讀 1008·2019-08-26 10:45