详解如何使用vue-cli脚手架搭建Vue.js项目
作者:weiqinl 发布时间:2023-07-02 17:05:19
标签:vue,cli,脚手架
1. 前言
vue-cli
一个简单的构建Vue.js
项目的命令行界面
整体过程:
$ npm install -g vue-cli
$ vue init webpack vue-admin
$ cd vue-admin
$ npm install
$ npm run dev
后面分步说明。
2. 安装
前提条件,Node.js >=4.x版本,建议使用6.x版本。npm版本 > 3.x
全局安装vue-cli
$ npm install -g vue-cli
3. 使用
$ vue init <template-name> <project-name>
vue官方提供了多个打包工具版本的模版。我们可以使用vue list
命令查看,当前可以使用的模版。
$ vue list
我们在这里,使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离
$ vue init webpack vue-element-admin
之后,在E:\project
文件夹下面,会有刚初始化的构建的项目vue-element-admin
4. 运行结果
项目基础结构已经搭建好了,现在来启动它。
进入项目文件:
$ cd vue-element-admin
安装依赖:
中国行情原因,直接安装,有时候会失败。我们一般使用npm的淘宝镜像cnpm。
先安装cnpm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后,使用:
$ cnpm install
你直接安装也可以的:
$ npm install
运行:
$ npm run dev
启动之后,自动打开默认浏览器
之后,就可以进行本地开发,实时预览开发效果。
5. 打包部署
项目开发完成之后,可以使用npm run build
进行打包工作
$ npm run build
打包完成之后,会生成dist
文件夹,项目上线时候,只需要将dist
文件夹放到服务器就行了。
6. 项目结构
来源:http://www.cnblogs.com/weiqinl/p/6875645.html


猜你喜欢
- 前置条件确保mysql的版本是5.7+一、新建mysql表增加json字段二、pojo类package com.cxstar.domain;
- 本文实例为大家分享了python实现图像降噪的具体代码,供大家参考,具体内容如下任务描述背景图像在数字化和传输等过程中会产生噪声,从而影响图
- Django结合ajax进行页面实时更新踩过的坑简单记录一下在使用Django、echarts和ajax实现数据动态更新时遇到的一些坑: 1
- 这个框架主要还是思想,之后,,,还是创建项目好了,1.新建一个项目新建一个maven,并且选择webapp类型。2.点击next选项这里面的
- LoadRunner监控MySQLhttp://www.docin.com/p-92272846.htmlAdvanced MySQL Pe
- Python在读取文件内容时的路径问题,值得深究一下.我想讨论的重点还是在绝对路径上面.在这之前我们先看一下1:相对路径这张图演示了在相对路
- 在上一篇博客介绍TOML配置的时候,讲到了通过信号通知重载配置。我们在这一篇中介绍下如何的平滑重启server。与重载配置相同的是我们也需要
- 1)首先注册一个邮箱,这里以163邮箱为例2)注册之后登录,进行如下修改找到设置,设置一个授权码,授权码的目的仅仅是让你有权限发邮件,但是不
- 修改MySQL密码:mysqladmin -u root -p password 123456mysqladmin -u用户名 -p旧密码
- 对图像块应用仿射变换,我们将其称为图像扭曲(或者仿射扭曲)。该操作不仅经常应用在计算机图形学中,而且经常出现在计算机视觉算法中。一、仿射变换
- 今天带你们去研究一个有趣的东西,文字识别OCR。不知道你们有没有想要识别图片,然后读出文字的功能。例如验证码,如果需要自动填写的话就需要这功
- 一、逻辑数据库和表的设计数据库的逻辑设计、包括表与表之间的关系是优化关系型数据库性能的核心。一个好的逻辑数据库设计可以为优化数据库和应用程序
- httprouterhttprouter 是一个高性能、可扩展的HTTP路由,上面我们列举的net/http默认路由的不足,都被httpro
- 本文实例讲述了Python实现对文件进行单词划分并去重排序操作。分享给大家供大家参考,具体如下:文件名:test1.txt文件内容:But
- 获取当前工作目录import sysprint(sys.path[0])获取执行命令的位置import osprint(os.getcwd(
- 本文实例讲述了Python实现更改图片尺寸大小的方法。分享给大家供大家参考,具体如下:1、PIL包推荐Pillow 。2、源码:#encod
- 首先看middleware的定义:auth模块有两个middleware:AuthenticationMiddleware和SessionA
- 前言:经过一段时间的测试验证,决定使用RPM来做Golang服务的部署方式. 我们组关于代码的部署方式主要有这么几种,Python直接使用v
- RPC是什么?所谓RPC(remote procedure call 远程过程调用)框架实际是提供了一套机制,使得应用程序之间可以进行通信,
- 一: 基本使用:1:环境的安装:pip install flask-sqlalchemypip install pymysql2:组件初始化