VUE学习笔记之vue cli 构建项目
一、环境搭建:
1.安装node.js
从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功
因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响。
2.安装淘宝镜像
npm install -g cnpm --registry= https://registry.npm.taobao.org,安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。
3.安装webpack
npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
4.安装vue-cli
npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
二、项目构建:
通过上面4步,我们已经准备好了环境和工具,接下来就开始构建项目
1.创建工程目录
创建一个目录来存放项目,这里是:C:\vue-project cd命令进入目录下或安装了git的可以在该目录下右键选择Git Bash Here
2.初始化构建项目
vue init webpack creditbank-manager,注意这里的“creditbank-manager” 是项目的名称可以说是随便的起名,但是需要注意的是“不能用中文”。
$ vue init webpack creditbank-manager A newer version of vue-cli is available. latest: 2.9.3
installed: 2.9.2 ? Project name (creditbank-manager) //项目名
? Project name creditbank-manager
? Project description (A Vue.js project) //项目描述
? Project description A Vue.js project
? Author (cwh) //项目创建人
? Author cwh
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) y //安装路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n //语法检测 建议no
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) y
? Set up unit tests Yes
? Pick a test runner (Use arrow keys)
? Pick a test runner jest
? Setup e2e tests with Nightwatch? (Y/n) y
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (reco
? Should we run `npm install` for you after the project has been created? (reco
mmended) npm vue-cli · Generated "creditbank-manager". # Installing project dependencies ...
# ========================
# Project initialization finished!
# ======================== To get started: //启动方式 cd creditbank-manager
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
3.安装项目依赖
cd creditbank-manager 命令进入创建的项目目录
安装项目依赖:npm install
如出现以下错误:
执行:
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
再次 npm install
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router vue-resource --save
4.启动项目
启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:
如果没有启动默认浏览器页面,修改 config 下面 index.js
默认端口也是这里修改
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true
执行:npm run dev 服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:
VUE学习笔记之vue cli 构建项目的更多相关文章
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- AntDesign vue学习笔记(一)初始化项目
最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save a ...
- vue学习记录①(vue-cli脚手架构建项目结构)
我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- Vue学习笔记之Vue介绍
vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
随机推荐
- iptables中DNAT、SNAT和MASQUERADE的理解
转:http://blog.csdn.net/yu_xiang/article/details/9212543 DNAT(Destination Network Address Translation ...
- Hystrix请求命令 HystrixCommand、HystrixObservableCommand
Hystrix有两个请求命令 HystrixCommand.HystrixObservableCommand. HystrixCommand用在依赖服务返回单个操作结果的时候.又两种执行方式 -ex ...
- Centos7-卸载自带的jdk 安装jdk8
卸载JDK Centos7一般都会带有自己的openjdk,我们一般都回用oracle的jdk,所以要卸载 步骤一:查询系统是否以安装jdk #rpm -qa|grep java 或 #rpm ...
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- 03_HTML Canvas第一天
视频来源:麦子学院 讲师:刘慧涛 w3cshool之HTML5画布:http://www.w3school.com.cn/html5/html_5_canvas.asphtml5 canvas参考手册 ...
- PPT基础教程
在当前演示文稿中增加新的幻灯片:快捷键>>ctrl+M 或者将鼠标定位到左侧窗格,然后按下回车键enter 母版??? 默认版式是"标题和文本" 右键 > ...
- 编译原理-NFA构造DFA
本题摘自北邮的编译原理与技术. 首先,根据此图构造状态转换表 表中第一列第一行表示从第一个符号B通过任意个空转换能到达的节点,Ia表示由此行的状态数组({B,5,1}可以看作0状态)经过一个a可以到达 ...
- Git远程管理[五]
标签(linux): git 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 相关命令 git clone https://github.com/guohongz ...
- JavaWeb项目架构之Kafka分布式日志队列
架构.分布式.日志队列,标题自己都看着唬人,其实就是一个日志收集的功能,只不过中间加了一个Kafka做消息队列罢了. kafka介绍 Kafka是由Apache软件基金会开发的一个开源流处理平台,由S ...
- ABP官方文档翻译 4.5 特征管理
特征管理 介绍 关于IFeatureValueStore 特征类型 Boolean特征 Value特征 定义特征 基本特征属性 其他特征属性 特征层级 检查特征 使用RequiresFeature特性 ...