一、 安装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,回车,启动项目

运行项目(1)

完成后,监听端口8080, 复制一下路径,在浏览器中打开。

运行项目(2)
 复制一下路径,在浏览器中打开。

可以在浏览器看到如下画面,恭喜你,已成功构建vue-cli项目,接下来就可以开始开发啦

Vue -cli 入门 --项目搭建(一)的更多相关文章

  1. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  2. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  3. vuejs学习——vue+vuex+vue-router项目搭建(二)

    前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...

  4. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  7. vuejs学习——vue+vuex+vue-router项目搭建(一)

    前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...

  8. vue多页面项目搭建(vue-cli 4.0)

    1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...

  9. VUE+Ionic,项目搭建&打包成APK

    安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择 ...

随机推荐

  1. UDF简记

    摘要: 1.开发UDF 2.开发UDAF 3.开发UDTF 4.部署与测试 5.一个简单的实例 内容:1.开发UDF 函数类需要继承org.apache.hadoop.hive.ql.UDF 实现ev ...

  2. vue2.0页面缓存和不缓存的方法

    // 模板中: <div class="home"> <keep-alive> <router-view v-if="$route.meta ...

  3. Linux下的解压命令

    Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是种打包格式,gz和bz2等后缀才是指代压缩方式:gzip和bzip2 filename. ...

  4. extjs.net list 点击弹出修改页面及初始化

    <SaveMask ShowMask="true" /> <LoadMask ShowMask="true" /> <Listen ...

  5. 阻塞式I/O实现简单TCP通信

    一.技术简介 (1)服务端打开两个端口9999和6666监听外来连接: (2)服务端的子进程通过端口9999监听外来消息,通过端口6666发送消息: (3)客户端的子进程处理外来消息,父进程发送消息 ...

  6. oracle pivot

    select * from (select a.drugname, a.drugform, a.drugspec, a.type flag, max(a.maxzjprice) maxprice, m ...

  7. [C++]2-1 水仙花数

    /* 水仙花数 输出100-999中的所有水仙花数.若三位数ABC满足ABC=A^3+B^3+C^3,则 称其为水仙花数.例如:153 = 1^3 + 5^3 + 3^3,故153是水仙花数. */ ...

  8. Ubuntu18.04使用AndroidStudio3.2.1编译TensorFlow android demo【2018年12月】

    按照官方教程修改下面3处即可编译完成. 修改部分: 在build.gradle文件里修改以下部分: 1.原来: buildscript { repositories { jcenter() } dep ...

  9. 最小生成树入门(克鲁斯卡尔+普利姆 hdu1233)

    克鲁斯卡尔 #include <set> #include <map> #include <queue> #include <stack> #inclu ...

  10. 美团面试-canvas实现放射图

    一个nice的面试官对面试经验匮乏者的温暖To snow peak,哈哈 drawRadial(100, 100, 30, 10) /** *@description *用canvas画放射图 * * ...