從零開始通過vue-cli搭建項目

104828720 發布于2019-08-22 17:36 / 1383人閱讀

npm i -g vue -cli 全局安裝vue-cli腳手架【按需安裝】

vue init webpack my-project 構建項目

cd my-project 打開項目目錄，到項目目錄路徑

npm install 可以使用cnpm i 安裝依賴包

npm run dev 將本地項目跑起來

接下來就是做一些配置項

package.json

webpack-dev-server 加上--open --hot  【--hot】參數可以熱更新，并且我們執行完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"
  },

按照你的需求開始你的項目。
踩坑記:
坑一：

 "vue": "^2.5.2",
 "vue-router": "^3.0.1"
 "webpack": "^3.6.0",

router/index.js

遇到報錯：

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

云服務器 GPU云服務器從零開始搭建前端數據監控系統從零開始搭建騰訊云服務器從零開始 linux從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95333.html

從零開始搭建一個vue項目 -- vue-cli/cooking-cli（一）

摘要：從零開始搭建一個項目一搭建一個可靠成熟的項目介紹我是去年六月份接觸的，當時還是個菜逼，當然現在也是，寫了一年，抄代碼的時候一直是，在別人的框架基礎上開發，然后漸漸發現很多的模板都各有優點，所以慢慢的開始集合到了一起。從零開始搭建一個vue項目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一個可靠成熟的項目 1.介紹 vue-cli 我是去年六月...

rainyang 2019-08-20 16:51 評論0 收藏0
從零開始搭建一個vue項目 -- vue-cli/cooking-cli（二）

從零開始搭建一個vue項目 -- vue-cli/cooking-cli（二） 1.配置圖片路徑圖片的路徑有多種方法，第一種是直接把圖片放在根目錄的 static 文件夾下，引入的路徑是 /staic/img ，這種方法的缺點在于webpack不會識別根目錄，所以發布的時候需要手動把圖片文件夾添加進去第二種方法是配置webpack，在/build/webpack.base.conf.js文件...

0xE7A38A 2019-08-20 16:56 評論0 收藏0
從零開始搭建一個vue-ssr（下）

摘要：開始改建補充安裝依賴與上一次不同，這次我們基于進行改建，已經有了很多依賴庫了，但我們任需要補充一個核心修改客戶端的配置修改文件，添加插件添加了這個配置以后，重新啟動項目通過地址就可以訪問到，頁面中出現的內容就是所需要的。從零開始搭建一個vue-ssr 前言上次我們已經實現了從零開始，搭建一個簡單的vue-ssr的demo：從零開始搭建一個vue-ssr（上）。那么這次呢，我們基于v...

Jochen 2019-08-23 18:23 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

qieangel2013 2019-08-23 11:58 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

kel 2019-08-19 11:10 評論0 收藏0