vue-cli 3.0版本
目前官網(wǎng)上還不是3.0版本,所以需要在github上面學(xué)習(xí)使用:github網(wǎng)站:https://github.com/vuejs/vue-cli/tree/dev/docs
1、項(xiàng)目搭建
(1)、在上面的GitHub網(wǎng)頁(yè)中,拉到底部可以看到:
然后在全局中執(zhí)行命令:sudo npm install -g @vue/cli即可。
最后,
vue -V //可以查看到當(dāng)前的vue是3.0版本了
(2)、查看vue 相關(guān)指令
vue --help
查看到的常用指令:
-V:查看版本號(hào)
-h:
create:創(chuàng)建一個(gè)項(xiàng)目
add: 在項(xiàng)目中創(chuàng)建插件(相當(dāng)于之前的 "npm install")
invoke:在已創(chuàng)建好的項(xiàng)目中調(diào)用插件
inspect:檢查webpack配置
serve:開發(fā)環(huán)境――npm run serve(相當(dāng)于之前的npm run dev)
build:生產(chǎn)環(huán)境,打包上線的
ui:調(diào)用一個(gè)ui庫(kù)
(3)、創(chuàng)建項(xiàng)目
//執(zhí)行:vue create vue2-demo
在下面的選項(xiàng)中選擇Manually select features,點(diǎn)擊enter后,在顯示的列表中通過(guò)上下鍵+空格選擇需要的插件。下面根據(jù)需要選擇即可。
(4)、依次按照下面的步驟創(chuàng)建一個(gè)專屬的腳手架,這樣下次創(chuàng)建項(xiàng)目的時(shí)候就能直接使用“testnewcli”這個(gè)腳手架了。
// vue.config.js 配置說(shuō)明// 這里只列一部分,具體配置慘考文檔啊module.exports = { // baseUrl type:{string} default:'/' // 將部署應(yīng)用程序的基本URL // 將部署應(yīng)用程序的基本URL。 // 默認(rèn)情況下,Vue CLI假設(shè)您的應(yīng)用程序?qū)⒉渴鹪谟虻母夸浵隆?// https://www.my-app.com/。如果應(yīng)用程序部署在子路徑上,則需要使用此選項(xiàng)指定子路徑。例如,如果您的應(yīng)用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'. baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/', // outputDir: 在npm run build時(shí) 生成文件的目錄 type:string, default:'dist' // outputDir: 'dist', // pages:{ type:Object,Default:undfind } /* 構(gòu)建多頁(yè)面模式的應(yīng)用程序.每個(gè)“頁(yè)面”都應(yīng)該有一個(gè)相應(yīng)的JavaScript條目文件。該值應(yīng)該是一 個(gè)對(duì)象,其中鍵是條目的名稱,而該值要么是指定其條目、模板和文件名的對(duì)象,要么是指定其條目 的字符串, 注意:請(qǐng)保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動(dòng)服務(wù)會(huì)報(bào)錯(cuò)的*/ // pages: { // index: { // entry for the page // entry: 'src/index/main.js', // the source template // template: 'public/index.html', // output as dist/index.html // filename: 'index.html' // }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. // subpage: 'src/subpage/main.js' // }, // lintOnSave:{ type:Boolean default:true } 問(wèn)你是否使用eslint lintOnSave: true, // productionSourceMap:{ type:Bollean,default:true } 生產(chǎn)源映射 // 如果您不需要生產(chǎn)時(shí)的源映射,那么將此設(shè)置為false可以加速生產(chǎn)構(gòu)建 productionSourceMap: false, // devServer:{type:Object} 3個(gè)屬性host,port,https // 它支持webPack-dev-server的所有選項(xiàng) devServer: { port: 8085, // 端口號(hào) host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自動(dòng)啟動(dòng)瀏覽器 // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個(gè)代理 proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } }, // 配置多個(gè)代理 }}
2、添加插件(新版本提供的添加方法)
/添加插件的新方法:vue addvue add vuetify
注:如果我們安裝的是模塊依賴,建議使用npm install ;如果安裝的是組件UI,可能會(huì)對(duì)當(dāng)前的頁(yè)面UI有影響的情況下,就使用vue add方法安裝。
比如上面的vuetify是一個(gè)vue的UI庫(kù),會(huì)對(duì)頁(yè)面結(jié)構(gòu)布局產(chǎn)生影響,所以使用vue add 方法;比如我們安裝axios插件,就是用npm install axios就可以了。
3、全局環(huán)境變量
(1)、創(chuàng)建".env"文件:
(2)、在組件中使用全局變量
<template> <div> <h1>{{url}}</h1> </div></template><script>export default { data() { return { //調(diào)用全局的環(huán)境配置 url: process.env.VUE_APP_URL }; }};</script>
4、獨(dú)立運(yùn)行.vue文件
如上圖中,在根目錄下創(chuàng)建的"hello.vue"文件如何獨(dú)立運(yùn)行起來(lái)呢?(不依賴腳手架)
//可行方案:安裝插件sudo npm install -g @vue/cli-service-global//之后執(zhí)行命令:vue serve hello.vue//這樣就可以在瀏覽器看到hello.vue相對(duì)應(yīng)的頁(yè)面了
5、配置的基礎(chǔ)路徑(vue.config.js)
根目錄創(chuàng)建文件"vue.config.js",
//vue.config.js中配置module.exports = { baseUrl: "/", //根路徑 outputDir: "dist", //構(gòu)建輸出目錄,執(zhí)行:npm run build后項(xiàng)目打包在dist文件下 assetsDir: "assets", //靜態(tài)資源目錄(js,css,img,fonts) linitOnSave: false, //是否開啟eslint保存檢測(cè),有效值:true || false || "error"}
6、配置跨域請(qǐng)求
在vue.config.js中進(jìn)行配置:
module.exports = { baseUrl: "/", //根路徑 outputDir: "dists", //構(gòu)建輸出目錄 assetsDir: "assets", //靜態(tài)資源目錄(js,css,img,fonts) lintOnSave: false, //是否開啟eslint保存檢測(cè),有效值:true || false || "error" devServer: { open: true, //瀏覽器自動(dòng)打開頁(yè)面 host: '127.0.0.0', //域名 //host: "0.0.0.0", //如果是真機(jī)測(cè)試,就使用這個(gè)IP port: 8060, https: false, hotOnly: false, //熱更新(webpack已實(shí)現(xiàn)了,這里false即可) proxy: { //配置跨域 '/api': { target: "http://localhost:2020/api", ws:true, changOrigin:true, pathRewrite:{ '^/api':'' } } } }}
7、加載json數(shù)據(jù)
根目錄下創(chuàng)建data文件夾,里面包含文件data.json,然后在vue.config.js文件中進(jìn)行配置。
const goods = require("./data/goods.json");module.exports = { baseUrl: "/", //根路徑 outputDir: "dists", //構(gòu)建輸出目錄 assetsDir: "assets", //靜態(tài)資源目錄(js,css,img,fonts) lintOnSave: false, //是否開啟eslint保存檢測(cè),有效值:true || false || "error" devServer: { open: true, //瀏覽器自動(dòng)打開頁(yè)面 host: 'localhost', //域名 port: 8060, https: false, hotOnly: false, //熱更新(webpack已實(shí)現(xiàn)了,這里false即可) //加載本地josn數(shù)據(jù) //參見webpack官網(wǎng):https://webpack.docschina.org/configuration/dev-server/#devserver-before before(app) { //http://localhost:8090/myapi/goods app.get("/myapi/goods", (req, res) => { res.json(goods); }) } }}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注