vue-cli -- > 项目基本构建的方法
本文档目的在于让对vue了解比较少的同学,能够快速搭建属于自己的vue项目。(window)
一、构建项目的前提条件
1、确保本机安装了node.js ^6 --> javascript 的服务端的运行环境
2、确保本机安装了npm ^2 --> npm的包的管理工具
注意:如果你装了node.js 和 npm 请检查它们对应的版本号。
1、win + r 打开cmd,键入 node -v 回车
    
2、键入 npm -v
    
符合vue的开发环境,我们不多啰嗦直接进入项目构建。
二、构建自己的vue-cli应用
1、因为vue脚手架的一些好用的功能是基于webpack模块的,所以首先你应该全局安装webpack模块(安装成功后应该会出现版本号)
npm install webpack -g //全局安装webpack
webpack -v //检查webpack是否安装成功, 成功即出现版本号。
     
2、全局安装vue-cli
npm install vue-cli -g
vue -V // 检查vue-cli是否安装成功 成功出现如下提示
      
3、构建一个名字叫做report的项目
vue init webpack report // 在cmd当前目录下,创建一个名字叫做report的项目
回车后,会出现很多yes/no的选项,这里根据个人需求选择是否安装。在这里个人建议先全部都选择no不安装,后期需要那个模块我们自己安装。这样印象深刻并且能够
学会如何自己配置项目中应用的模块。
注意:在这里最后的 npm install 选择上,这是安装vue-cli基本的包。等待安装结束后。
4、进入项目文件夹,启动项目
cd report // 进入文件夹
npm run dev // 启动项目
     
最后出现localhost:8080字样便可放入浏览器地址栏中进行访问vue-cli的默认组件
注意:
后面的端口可能不是8080,因为8080是vue-cli默认配置的端口号。如果本机开启了其他服务,webpack会自动检测,并且分配一个新的端口,有可能是8081、
8082。这个不要在意,字节使用就可以了。
个人邮箱:wangweizhangweb@163.com
姓名:王维璋
有问题随时交流,不怕打扰。
最后:
本文档意在与帮助初学者快速构建vue项目,虽没什么技术含量。但不要随意转载,如需转载保存。需署名。谢谢配合。
vue-cli -- > 项目基本构建的方法的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
		
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
 - node.js和vue cli脚手架下载安装配置方法
		
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
 - vue/cli项目添加外部js文件的一个方法
		
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
 - Vue.js项目脚手架构建
		
vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备( ...
 - vue初始化项目,构建vuex的后台管理项目架子
		
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
 - vue cli 项目的提交
		
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
 - Vuex内容解析和vue cli项目中使用状态管理模式Vuex
		
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
 - Vue cli项目开启Gzip
		
目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...
 - vue.cli项目中src目录每个文件夹和文件的用法
		
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
 
随机推荐
- 利用Android studio开发Java工程
			
1. 新建项目 新建项目肯定是去new,但到底是new project还是new module是一个问题.在这解释一下,如果new project的话是新建一个工程,相当于新建一个工作区,工程中可以有 ...
 - 1005 继续(3n+1)猜想(25 分)
			
卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 进行验证的时 ...
 - 求(3+开根5) N次方的整数部分最后3位
			
求(3+开根5) N次方的整数部分最后3位,请补足前导零 . 分析:首先(1)=(3+开根5) N次方的展开为 an + bn * 根号5 的形式 . 同时也有 (2)=(3-开根5) N次方 = ...
 - Educational Codeforces Round 13 B
			
Description The girl Taylor has a beautiful calendar for the year y. In the calendar all days are gi ...
 - 2015苏州大学ACM-ICPC集训队选拔赛(2)1004
			
草爷要的数 Problem Description 今天校队队员们准备放松一下,我们队就准备选一些数字玩,然而每个人喜欢的数字是不同的,刻盘喜欢x(1<=x<=1^9),凯凯喜欢y(1&l ...
 - 使用 maven 打包 src/test/java下的文件,并用 java jar 跑打包出来的jar
			
https://blog.csdn.net/nba_2011/article/details/71296745
 - 测试用例逐步演进-xmind2excel(Python版)测试用例逐步演进-xmind2excel(Python版)
			
最近,我在做项目的时候,经常被问到一个问题:如何做测试评审会更有效呢? 只要做过测试用例评审,特别是比较复杂的测试用例评审的时候,很多测试同学都会苦恼于如何能更有效的向大家说出自己的测试设计思路. 当 ...
 - Pycharm在线/手动离线安装第三方库-以scapy为例(本地离线添加已经安装的第三方库通过添加Path实现)
			
在线安装运行Pycharm,打开需要添加scapy文件的项目,以TestScapy为例 点击工具栏的File选项,选中Settings,单击打开 ...
 - 19. Remove Nth Node From End of List(C++,Python)
			
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
 - Git命令行中文显示错误
			
中文文件名乱码(git status.git log.git pull .git push) #不对0x80以上的字符进行quote,解决git status/commit时中文文件名乱码git co ...