注意:

1、安装前您需要查看自己是否有node环境  检查:node - v

2、如果没有的话,需要先搭建好才能进行下一步操作

(参考:https://www.cnblogs.com/sylys/p/11703067.html

Vue-cli安装步骤:

1、控制台进入项目根目录文件夹

2、npm i -g vue-cli  (使用npm全局安装vue-cli)

3、执行 vue list 可以看到很多实用的模板,这里实用的是 webpack

4、vue init webpack (初始化模板)

5、? Generate project in current directory? (Y/n)  (是否在当前目录生成项目 是的话回车键)

6、项目名称不能出现大写字母!

1)?Project name (vuePro)   (是否使用vuePro作为项目名------》抱歉,名称不能再包含大写字母。)

2)? Project name vuepro (回车)

7、?Project description (A Vue.js project)    可以写一些对这个项目的描述 ------- ? Project description A Vue.js project

8、?Vue build (Use arrow keys)  是否生成vue (回车)------ Vue build standalone

9、?Install vue-router? (Y/n)     是否安装路由 (根据需要 这里使用y) ----- Install vue-router? Yes

10、?Use ESLint to lint your code? (Y/n) (是否使用ESLint 作为代码检测工具) 这里是代码风格检查器.为确保风格,最好选择yes,后面出现使用哪种选项,选择第一个风格即可.【ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误。 【ESlint 中文官方网站】:http://eslint.cn/   】

11、 ?Pick an ESLint preset (Use arrow keys)   使用箭头键 选择 Eslint 预设  ----- Pick an ESLint preset Standard

12、? Set up unit tests (Y/n)  (是否设置单元测试)

13、? Pick a test runner  ---- Pick a test runner karma

14、? Setup e2e tests with Nightwatch? No

15、?Should we run `npm install` for you after the project has been created? (recommended) npm

#  Installing project dependencies ...

> phantomjs-prebuilt@2.1.16 install F:\ProgramFiles\vue\vuePro\node_modules\phantomjs-prebuilt
  > node install.js

。。。。

(因为需要下载很多的依赖,所以很慢,需要等待....)

16、nmp run dev 启动本地服务,打开网址:http://localhost:8080/

使用控制台搭建vue-cli脚手架的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  3. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  4. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  5. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  6. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  7. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  8. 从0开始搭建vue+webpack脚手架(一)

    基于多数情况下都是使用vue-cli初始化项目, 却始终未去了解其原理.从零开始搭建,可以让自己更深层次的理解框架. 首先从最基本的npm 开始, 至于安装npm 和 node就不用再赘述了,那是前端 ...

  9. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  10. 从0开始搭建vue+webpack脚手架(四)

    之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...

随机推荐

  1. 第七周作业—N42-虚怀若谷

    一.简述OSI七层模型和TCP/IP五层模型 1. OSI七层模型 物理层:二进制传输,为启动.维护以及关闭物理链路定义了电气规范.机械规范.过程规范和功能规范:实际的最终信号的传输是通过物理层实现的 ...

  2. dnsmasq+Stunnel+sniproxy加密代理

    一.环境介绍 [root@kimissVPN ~]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@kimissVPN ~]# un ...

  3. React Native 之createDrawerNavigator和createSwitchNavigator

    其他代码接上篇文章 createDrawerNavigator 抽屉 createSwitchNavigator 模拟登录=>主界面 index.js /** * @format */ impo ...

  4. 阿里云服务器tomcat能启动,但是不能访问问题。

    显示时间过长. 解决方案: 可以看到就可以访问了.百度云的就没有这个问题.

  5. Redis实战(十一)Redis面试题

    序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...

  6. 又联考了一场,感觉自己好菜啊,T1没写出来,后来花了一个早上调试。QAQ。最后发现是个-1还有取模没打。。。TAT。。。难受极了!!!

    简单的区间(interval) 题目描述: 样例输入: 样例1: 4 3 1 2 3 4 样例2: 4 2 4 4 7 4 样例输出: 样例1: 3 样例2: 6 提示: 时间限制:1000ms 空间 ...

  7. 【bzoj3162】独钓寒江雪

    *题目描述: *题解: 树哈希+组合数学.对于树的形态相同的子树就一起考虑. *代码: #include <cstdio> #include <cstring> #includ ...

  8. Leetcode 11. Container With Most Water(逼近法)

    11. Container With Most Water Medium Given n non-negative integers a1, a2, ..., an , where each repr ...

  9. USACO2018 DEC(Platinum) (树上乱搞,期望+凸包)

    发现这跟\(Gold\)难度简直天差地别啊.. \(T1\) 传送门 解题思路 这道题还是很可做的,发现题意可以传化成一棵树每次从叶子节点删边,然后有\(m\)条限制,形如\(a\)在\(b\)前面删 ...

  10. Web开发者易犯的五大严重错误

    无论你是编程高手,还是技术爱好者,在进行Web开发过程中,总避免不了犯各种各样的错误. 犯了错误,可以改正.但如果犯了某些错误,则会带来重大损失.遗憾.令人惊讶的是,这些错误往往是最普通,最容易避免. ...