从零开始通过vue-cli搭建项目

104828720 发布于2019-08-22 17:36 / 1375人阅读

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从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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