前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue-cli脚手架快速搭建项目图文教程

Vue-cli脚手架快速搭建项目图文教程

原创
作者头像
游魂
发布2018-05-11 19:55:47
1.6K2
发布2018-05-11 19:55:47
举报
文章被收录于专栏:前端开发

前言:比较基础的教程,大神自行忽略

脚手架是什么?

“脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。

程序员编写一份specification(规格说明书),来描述怎样去使用数据库;而由(脚手架的)编译器来根据这份specification生成相应的代码,进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架",在脚手架上面去更高效的建造出强大的应用!

好吧,其实说白点就是可以快速帮你搭建一个项目的基础架子,你直接拿过来用然后添加新项目需要的东西。

准备工作

安装node

首先我们需要安装node环境,官网https://nodejs.org下载安装包。

安装完成后可以,可以命令行工具中输入 node -vnpm -v,如果能显示出版本号,就说明安装成功。

img
img

安装 Vue-cli

首先全局安装 vue-cli

代码语言:txt
复制
npm install -g vue-cli

安装完成后 同样适用命令行工具 输入 vue -V 记住 大写V ! 大写V ! 大写V !

img
img

生成项目

首先需要在命令行中进入到项目目录,然后输入:

代码语言:txt
复制
vue init webpack Vue-Project

Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹,如下图

img
img

**初始化,安装依赖**

如果跟我一样没有立即执行npm装包,那么咱们可以手动 执行去安装依赖

代码语言:txt
复制
npm install

安装依赖完成

img
img

**run**

代码语言:txt
复制
npm run dev

浏览器打开http://localhost:8080/#/ ,会看到欢迎页:

img
img

**build**

代码语言:txt
复制
npm run build

打包后会生成dist文件夹

img
img

打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到:

img
img

说明引用路径错了,需要手动修改:

进入config/index.js

img
img

如果本地的8080端口被占用,可以修改端口号。

**打包上线**

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 脚手架是什么?
  • 准备工作
    • 安装node
      • 安装 Vue-cli
      • 生成项目
      相关产品与服务
      数据库
      云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档