1.安装node环境,然后在命令行输入node -v 和npm -v 查看版本号

2.在正式开始项目之前我们先介绍一下vue-cli,vue-cli是一个脚手架工具,vue-cli是帮助我们写好vue.js基础代码的工具,可以帮助我们生成一个项目目录,可以本地调试,单元测试,代码部署等等。

安装vue-cli

$ npm install -g vue-cli

开始创建项目

使用vue-cli

$ vue init <template-name> <project-name>

第一个是模板名称,第二个是项目名称,模板有webpack,webpack-simple ,browserify ,browserify-simple ,simple我们这个项目使用的是webpack

下面我们就来搭建一个项目名称为myvue模板为webpack的vue项目(注:此处项目名不可有大写):

vue init webpack myvue

接下拉终端里面会问你(也可能会跟你说vue不是内部或外部命令,本篇文章结尾会有解决办法)

? Project name (myvue)

项目名称是不是 myvue ,我们按回车,表示,是。当然,你也可以重写一个,然后回车。

然后

? Project description (A Vue.js project)

项目描述,一个 vue.js 的项目。同样,我们可以填写内容,或者直接回车

然后

? Author (fungleo <web@fengcms.com>)

 作者,同上可填可不填

? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere

  这里是问你,需要不需要安装编译器,我们选择需要安装,也就是第一个,也就是直接回车就OK了。

? Install vue-router? (Y/n)

  问是不是需要安装 vue-router ,需要安装,这个是管理路由的。我们直接回车。

? Use ESLint to lint your code? (Y/n)

  是否需要使用 ESLint 来检查你的代码。需要!所以同上,我们直接回车。

? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)

  然后问你需要使用哪种风格来检查你的代码。我们选择第一个 Standard 来检查代码。所以,直接回车。

? Setup unit tests with Karma + Mocha? (Y/n)

  是否需要安装测试功能。不要。我们输入 n 然后回车。

? Setup e2e tests with Nightwatch? (Y/n)

  还是关于测试的内容,我们还是输出 n 然后回车。

最后

现在会生成对应项目名称的文件夹 然后切换到项目目

cd myvue

安装依赖(建议用cnpm镜像代替npm安装速度会快好多)

npm install

  最后运行项目

npm run dev

  

vue 不是内部或外部命令解决办法

这种如果确定node环境装了之后还会出现这种情况 就是环境变量除了问题

找到vue.cmd文件

将 vue.cmd的路径加入环境变量

重启命令窗口,执行正常,新项目创建成功。

-----只有用尽全力,才能看起来毫不费劲

使用vue-cli搭建vue项目的更多相关文章

  1. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  2. 利用脚手架vue cli搭建vue项目

    vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...

  3. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  4. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

  5. [Vue CLI 3] vue inspect 的源码设计实现

    首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...

  6. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  7. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  8. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

  9. 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  10. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

随机推荐

  1. [paper reading] C-MIL: Continuation Multiple Instance Learning for Weakly Supervised Object Detection CVPR2019

    MIL陷入局部最优,检测到局部,无法完整的检测到物体.将instance划分为空间相关和类别相关的子集.在这些子集中定义一系列平滑的损失近似代替原损失函数,优化这些平滑损失. C-MIL learns ...

  2. docker配置nginx做反向代理管理tomcat应用

    由于业务开始复杂,单一tomcat已经不足以满足业务需求,多tomcat部署起来不方便而且面临域名解析问题,因此开始增加反向代理,由于docker的易用性,便使用docker管理各个应用. docke ...

  3. 第n次搭建 SSM 框架

    什么说第 N 次搭建SSM框架呢? 刚学习java的时候,搭建 SSM 框架想做一个个人项目之类的,后来没搭起来,也就拖延了,进入公司之后,接触的第一个项目就是SSM的,模仿了一下,也能搭个简简单单的 ...

  4. Run Keyword And Ignore Error,Run Keyword And Return Status,Run Keyword And Continue On Failure,Run Keyword And Expect Error,Wait Until Keyword Succeeds用法

    *** Test Cases ***case1 #即使错误也继续执行,也不记录失败,且可以返回执行状态和错误信息 ${Run Keyword And Ignore Error status} ${st ...

  5. Luogu 3758 [TJOI2017]可乐(有向图邻接矩阵幂的意义 矩阵快速幂)

    题目描述 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且放在了加里敦星球的1号城市上.这个可乐机器人有三种行为: 停在原地,去下一个相邻的城市,自爆.它每一秒都会随机 ...

  6. js array 对象

    Javascript 对象: Array 对象:数组 创建方法: 1, var a = new Array() 2,var a = new Array(3) 3,var a = new Array(“ ...

  7. HTML入门11

    在网页中添加矢量图形, 使用矢量图形在很多情况下,效果较好,拥有较小的文件尺寸,高度缩放,下面具体讲解如何在网页中添加矢量图形 位图和矢量图 位图文件包含了每个像素的位置和色彩信息,流行的位图格式包括 ...

  8. Java_集合

    定义: 是一种工具,就像是容器,能存储任意数量的具有共同属性的对象. 与数组比较优点: (1)数组定义后长度不可变,集合长度可变: (2)数组只能通过下标访问,且下标类型只能是数字型,而有的集合(ma ...

  9. 19南昌网络赛L

    校赛打杂没施展开. 题意:一开始给你一颗 (0,0)到(0,l)的树. 这棵树每一年会长出来三个幼芽(雾),长度均为l/4,方向分别是左转60,右转60,和不变. 年份<=14 考虑3^14直接 ...

  10. url中文参数乱码问题

    1.参数乱码: js: var url = $$pageContextPath + "iecp/ads/heilanAnalogCurve.do?pointCode=" + get ...