https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack

条件:
node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v     npm -v;

安装步骤:
1、cmd打开命令行窗口
2、输入npm install vue-cli -g,然后回车等待

3、安装结束后输入vue 查看是否安装成功


4、运行vue init webpack demo(注:项目名称)回车,(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)


5、显示Project nanme 项目名 回车(项目名不允许使用大写)

6、project description 后面可以写上描述,或者直接回车


7、Author 后面可以写作者也可以回车 (如果配置过git会自动获取git的name)


8、Install vue-router? 选择Y(官方推荐的路由插件,几乎每个项目都用得到)


9、User ESLint to lint your code? 选Y(是否启用eslint检测规则,如果不是公司的大型项目或者多人共同开发博主感觉没有必要安装)


10、Set up unit tests? 问的是否要测试 选n

11、Setup e2e tests with Nightwatch? 选n( 用Nightwatch设置E2E测试?)

12、Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 选择使用npm、还是yarn安装,一般都是直接回车就好

13、这个时候在你创建的目录下就有你的目录了

14、cd 你的目录名然后输入npm run dev启动应用,启动成功它会自动打开一个vue页面


到此为止你已经学会了怎么安装 vue-cli脚手架工具了,下面我简单的说明下各个目录都是干嘛的:

main.js的介绍
el是挂载点,router是路由

App.vue 是整个文件的入口,有三部分,template模板 script 逻辑 style样式

注:网络整合如有侵权请联系博主删除

vue-cli脚手架的安装的更多相关文章

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

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

  2. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

  3. 13. Vue CLI脚手架

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

  4. vue工具 - vue/cli@3.xx 安装使用流程

    mac安装记得npm前边加sudo 安装脚手架,用于生成目录 npm install -g @vue/cli 安装用于编译单个的.vue文件 npm install -g @vue/cli-servi ...

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

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

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

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

  7. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  8. vue cli脚手架使用

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

  9. windows系统下 VUE cli手脚架环境安装

    1.安装 node.js环境  (cmd命令工具里输入 node -v 检测是否安装成功) 2.安装VUE 全局环境 npm install --global vue-cli (cmd命令工具里面安装 ...

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

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

随机推荐

  1. module.export与export的区别?

    对于大多数node初学者而言, module.exports应该都是理解的, 但多出来一个exports获取就有些疑问了 疑问一: 既然有module.exports了为什么还要有exports? 疑 ...

  2. SELECT 三级联动 [转]

    <!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList&l ...

  3. Python “ValueError: incomplete format” print(“a%” % ”)

    解决python打印%号和%format输出问题 >>> print('%s' %'1') 1 >>> print('%s%' %'1') Traceback (m ...

  4. J02-Java IO流总结二 《概述》

    1  流的概念 流是一个信息的通道,通过通道可以访问通道连接的文件对象. 2  流的分类 根据流中数据的流向,可分为输入流和输出流 输入流:从其他的地方流入到程序内存中的,比如InputStream. ...

  5. mysqldump: Got errno 32 on write 解决办法

    在执行mysqldump 时发生 mysqldump: Got errno 32 on write 报错: $ sudo mysqldump -u root -p ******* | gzip > ...

  6. python代码位置引发的错误

    觉得python对代码位置的要求简直是变态,缩进引发的错误我以前在博客里讲过了,如果不懂可以看看我以前的博客,今天又遇到了一个代码位置所引发的错误,现在给大家分享一下: 我想要打印出来一个5*5的实心 ...

  7. [转] TCPIP 网络协议层对应的RFC文档

    TCPIP网络协议层对应的RFC文档 RFC - Request For Comments 请求注解 TCP/IP层 网络协议 RFC文档 Physical Layer Data Link Layer ...

  8. Eclipse Git 克隆项目的时候出现Internal error; consult Eclipse error log

    在使用git下载代码时偶尔会遇到  Internal error; consult Eclipse error log 这个报错. 简述下个人解决思路: Eclipse 错误日志报错为:org.ecl ...

  9. 在Bash中定制炫酷的命令提示符

    如果你使用的是Linux桌面(例如:Fedora或者Ubuntu)的话,在Terminal上使用Bash通常是必须地,但是默认的Bash提示符都很普通.本文将提供简单的Bash脚本(通过定制PS1)定 ...

  10. ZooKeeper:架构和算法

    ZooKeeper主要用来解决分布式应用场景中存在的一些问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置管理等. 它支持Standalone模式和分布式模式,在分布式模式下,能够为分布式 ...