npm i -g vue -cli 全局安裝vue-cli腳手架【按需安裝】
vue init webpack my-project 構(gòu)建項(xiàng)目
cd my-project 打開項(xiàng)目目錄,到項(xiàng)目目錄路徑
npm install 可以使用cnpm i 安裝依賴包
npm run dev 將本地項(xiàng)目跑起來
接下來就是做一些配置項(xiàng)
package.json
webpack-dev-server 加上--open --hot 【--hot】參數(shù)可以熱更新,并且我們執(zhí)行完run后直接在窗口打開【--open】
"scripts": { "dev": "webpack-dev-server --inline --hot --open --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" },
按照你的需求開始你的項(xiàng)目。
踩坑記:
坑一:
"vue": "^2.5.2", "vue-router": "^3.0.1" "webpack": "^3.6.0",
router/index.js
遇到報(bào)錯(cuò):
import Vue from "vue" import Router from "vue-router" Vue.use(Router) export default new Router({ routes: [{ path: "/login", component: require("@/pages/login").default, meta: { title: "登錄" }, }, { path: "/404", component: require("@/pages/404").default, meta: { title: "404" } }, { path: "*", redirect: "/404", hidden: true } ] })
Failed to mount component: template or render function not defined.
解決方案 require路徑后加.default
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95333.html
摘要:從零開始搭建一個(gè)項(xiàng)目一搭建一個(gè)可靠成熟的項(xiàng)目介紹我是去年六月份接觸的,當(dāng)時(shí)還是個(gè)菜逼,當(dāng)然現(xiàn)在也是,寫了一年,抄代碼的時(shí)候一直是,在別人的框架基礎(chǔ)上開發(fā),然后漸漸發(fā)現(xiàn)很多的模板都各有優(yōu)點(diǎn),所以慢慢的開始集合到了一起。 從零開始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一個(gè)可靠成熟的項(xiàng)目 1.介紹 vue-cli 我是去年六月...
從零開始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli(二) 1.配置圖片路徑 圖片的路徑有多種方法,第一種是直接把圖片放在根目錄的 static 文件夾下,引入的路徑是 /staic/img ,這種方法的缺點(diǎn)在于webpack不會(huì)識(shí)別根目錄,所以發(fā)布的時(shí)候需要手動(dòng)把圖片文件夾添加進(jìn)去 第二種方法是配置webpack, 在/build/webpack.base.conf.js文件...
摘要:開始改建補(bǔ)充安裝依賴與上一次不同,這次我們基于進(jìn)行改建,已經(jīng)有了很多依賴庫了,但我們?nèi)涡枰a(bǔ)充一個(gè)核心修改客戶端的配置修改文件,添加插件添加了這個(gè)配置以后,重新啟動(dòng)項(xiàng)目通過地址就可以訪問到,頁面中出現(xiàn)的內(nèi)容就是所需要的。 從零開始搭建一個(gè)vue-ssr 前言 上次我們已經(jīng)實(shí)現(xiàn)了從零開始,搭建一個(gè)簡單的vue-ssr的demo:從零開始搭建一個(gè)vue-ssr(上)。那么這次呢,我們基于v...
摘要:可以使用或來安裝我用來重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行,可以寫成可以寫成看到這個(gè)畫面,安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面(英語:command-li...
摘要:可以使用或來安裝我用來重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行,可以寫成可以寫成看到這個(gè)畫面,安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面(英語:command-li...
閱讀 1762·2021-10-12 10:12
閱讀 2530·2021-09-29 09:42
閱讀 2711·2021-09-03 10:28
閱讀 2249·2019-08-30 15:54
閱讀 1153·2019-08-30 15:53
閱讀 1388·2019-08-30 11:26
閱讀 3357·2019-08-30 11:02
閱讀 2134·2019-08-30 11:02