VUE 脚手架项目搭建
1. 概述
1.1 说明
vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。GitHub地址是:https://github.com/vuejs/vue-cli。
2. 搭建
2.1 node环境
首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。
安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功
2.2 安装vue-cli
安装好了 node,就可以直接全局安装 vue-cli:npm install -g vue-cli 。
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功
2.3 生成项目
首先需要在命令行中进入到项目目录,然后输入:vue init webpack Vue-Project。
其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates ;Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目,基础项目搭建完成。
2.4 安装依赖
npm install (也可yarn install,使用yarn需安装进行安装对应yarn环境),安装后会写入package.json文件中,而不同的安装命令写入的位置也不同。
- npm install :对象 devDependencies(开发环境) 和 对象 dependencies(生产环境) 都写入所安装的依赖包与对应包的版本号。
- npm install --save:对象 dependencies 写入所安装的依赖包与对应包的版本号。
- npm install --save-dev:对象 devDependencies 写入所安装的依赖包与对应包的版本号。
2.5 启动项目
npm run dev 项目启动后 http://localhost:8080 即可打开本地项目地址,localhost为默认主机名,8080端口为默认端口,config>index.js文件中port为端口号设置,可进行更改设置(如8010)。host为主机名设置,设置为‘0.0.0.0’可IP访问也可localhost访问。
2.6 打包上线
npm run build 项目打包时需注意是否有静态文件的引用,即static文件夹下的一些文件,若有引用则需对config>index.js文件中的build对象下的assetsPublicPath值进行更改。
注意:assetsSubDirectory所指向的文件夹不会被webpack处理,使用方式为直接拷贝到最终的路径,由于必须使用绝对路径来引用此文件夹下的内容,所以assetsPublicPath
中的路径需更改为./。
VUE 脚手架项目搭建的更多相关文章
- vue脚手架项目搭建失败
可能是ssl 的问题 解决办法: 1. npm config set strict-ssl false 2. npm install -g supervisor 以上完成后vue ui 或vue cr ...
- Vue的项目搭建及请求生命周期
目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- 使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- (转)windows环境vue+webpack项目搭建
首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...
- [vue三部曲]第一部:vue脚手架的搭建和目录资源介绍,超详细!
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...
- vue脚手架的搭建
另一博客地址:https://segmentfault.com/a/1190000016451376 一.基础的知识 1.html 2.js 3.css二.搭建项目过程--windows系统1.nod ...
- node+mysql+vue+express项目搭建
第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g (-g 代表全局安装) 初始化项目 v ...
- Vue之项目搭建
一.Vue自动化工具的安装 nvm:nodejs 版本管理工具. 也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本. nodejs:在项目开发时的所需要的代码库 npm:nodej ...
随机推荐
- 三十七、Linux 线程——线程清理和控制函数、进程和线程启动方式比较、线程的状态转换
37.1 线程清理和控制函数 #include <pthread.h> void pthread_cleanup_push(void (* rtn)(void *), void *arg) ...
- 二十七、Linux 进程与信号---进程组和组长进程
27.1 进程组 27.1.1 进程组介绍 进程组为一个或多个进程的集合 进程组可以接受同一终端的各种信号,同一个信号发送进程组等于发送给组中的所有进程 每个进程组有唯一的进程组 ID 进程组的消亡要 ...
- springboot07-security
1.pom中添加thymeleaf和security依赖 <dependencies> <dependency> <groupId>org.springframew ...
- PHP连接数据库实现多条件查询与分页功能——关于租房页面的完整实例操作
租房页面如图: 代码如下: <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...
- [C++]Knights of a Polygonal Table(骑士的多角桌)
[程序结果:用例未完全通过,本博文仅为暂存代码之目的] /* B. Knights of a Polygonal Table url:http://codeforces.com/problemset/ ...
- 区分defer和async
今天要介绍的让脚本延迟加载,让脚本延迟加载的方式有多种,最简单粗暴的方法就是将 <script> 标签放在 <body> 标签的最下面,这样就可以按照先后顺序依次执行了,但是你 ...
- 阿里前CEO卫哲:马云好玩,人工智能泡沫巨大,新零售重在社区
阿里前CEO卫哲:马云好玩,人工智能泡沫巨大,新零售重在社区 投资中国网 08-21 08:34 投中网(https://www.chinaventure.com.cn) 编者按:当下的技术时代,是跨 ...
- 解决Ubuntu 18.04中文输入法的问题,安装搜狗拼音
首先安装fcitx一.检测是否安装fcitx首先检测是否有fcitx,因为搜狗拼音依赖fcitx> fcitx提示:程序“fcitx”尚未安装. 您可以使用以下命令安装:> sudo ap ...
- 论文笔记系列-Multi-Fidelity Automatic Hyper-Parameter Tuning via Transfer Series Expansion
论文: Multi-Fidelity Automatic Hyper-Parameter Tuning via Transfer Series Expansion 我们都知道实现AutoML的基本思路 ...
- python,练习乌龟吃鱼
''' 1.首先要有一个画布 2.随机乌龟和鱼的位置 3.移动 ''' import random as r list_x = [0,10] list_y = [0,10] class Turtle: ...