Vue -cli 入门 --项目搭建(一)
一、 安装node.js环境.
在node.js官网下载稳定版本(https://nodejs.org/en/)
下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。
检验是否安装成功,在cmd输入命令 node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功
二、安装 Vue-cli
打开cmd命令行工具,输入npm install -g vue-cli,回车 全局安装vue-cli
(注:npm会有点慢,建议更改为国内淘宝的镜像,只换源即可。在cmd输入命令:npm config set registry https://registry.npm.taobao.org)!!!!!!可能电脑会卡!!!!!
三、构建项目
1.创建项目
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
打开cmd,进入想要创建项目的目录下,输入:vue init webpack projectname
webpack默认是安装2.0版本,若要安装1.0版本,需在webpack后面加上版本号信息,
vue init webpack#1.0 project-name(安装1.0版本)
projextname是自定义的项目名称,例:我这里命名为 vuedemo
Project name:——项目名称
Project description:——项目描述
Author:——作者
Vue build:——构建模式,一般默认选择第一种
Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到
Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装
2.安装依赖
项目创建完成,打开文件夹可以看到目录结构如下
此时,项目已经初具雏形,但还未安装依赖,需打开cmd,进入项目所在根目录下,输入npm install,回车


我们此时再打开项目文件夹,可以看到多了node_modules文件夹,里面是各种需要的依赖包
安装依赖后项目结构
3.运行项目
打开cmd,进入到项目所在目录下,输入npm run dev,回车,启动项目

完成后,监听端口8080, 复制一下路径,在浏览器中打开。
可以在浏览器看到如下画面,恭喜你,已成功构建vue-cli项目,接下来就可以开始开发啦

Vue -cli 入门 --项目搭建(一)的更多相关文章
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vuejs学习——vue+vuex+vue-router项目搭建(三)
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
- vuejs学习——vue+vuex+vue-router项目搭建(二)
前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- vuejs学习——vue+vuex+vue-router项目搭建(一)
前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...
- vue多页面项目搭建(vue-cli 4.0)
1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...
- VUE+Ionic,项目搭建&打包成APK
安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择 ...
随机推荐
- UDF简记
摘要: 1.开发UDF 2.开发UDAF 3.开发UDTF 4.部署与测试 5.一个简单的实例 内容:1.开发UDF 函数类需要继承org.apache.hadoop.hive.ql.UDF 实现ev ...
- vue2.0页面缓存和不缓存的方法
// 模板中: <div class="home"> <keep-alive> <router-view v-if="$route.meta ...
- Linux下的解压命令
Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是种打包格式,gz和bz2等后缀才是指代压缩方式:gzip和bzip2 filename. ...
- extjs.net list 点击弹出修改页面及初始化
<SaveMask ShowMask="true" /> <LoadMask ShowMask="true" /> <Listen ...
- 阻塞式I/O实现简单TCP通信
一.技术简介 (1)服务端打开两个端口9999和6666监听外来连接: (2)服务端的子进程通过端口9999监听外来消息,通过端口6666发送消息: (3)客户端的子进程处理外来消息,父进程发送消息 ...
- oracle pivot
select * from (select a.drugname, a.drugform, a.drugspec, a.type flag, max(a.maxzjprice) maxprice, m ...
- [C++]2-1 水仙花数
/* 水仙花数 输出100-999中的所有水仙花数.若三位数ABC满足ABC=A^3+B^3+C^3,则 称其为水仙花数.例如:153 = 1^3 + 5^3 + 3^3,故153是水仙花数. */ ...
- Ubuntu18.04使用AndroidStudio3.2.1编译TensorFlow android demo【2018年12月】
按照官方教程修改下面3处即可编译完成. 修改部分: 在build.gradle文件里修改以下部分: 1.原来: buildscript { repositories { jcenter() } dep ...
- 最小生成树入门(克鲁斯卡尔+普利姆 hdu1233)
克鲁斯卡尔 #include <set> #include <map> #include <queue> #include <stack> #inclu ...
- 美团面试-canvas实现放射图
一个nice的面试官对面试经验匮乏者的温暖To snow peak,哈哈 drawRadial(100, 100, 30, 10) /** *@description *用canvas画放射图 * * ...