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. day 51 随机验证码, 验证登陆 ,以及 装饰器在函数中的应用

    前端很好的session 的例子 (随机验证码登陆) https://github.com/Endless-Clould/qianduan 参考: 验证码登录 https://www.cnblogs. ...

  2. 通过sessionStorage来根据屏幕宽度变化来加载不同的html页面

    因为项目需要,分别写了移动端和PC端的两个html页面,现在需要根据不同的屏幕宽度来加载对应的页面. 先说一下本人的思路-- 刚开始我直接在加载页面的时候判断屏幕宽度,然后加载相应的页面,大家是不是也 ...

  3. 《Head First 设计模式》读书笔记

    目录 <Head First 设计模式>读书笔记 创建模式 结构模式 行为模式 用思维导图记录的读书笔记. <Head First 设计模式>读书笔记 模式的分类遵循<设 ...

  4. 简单shell expect程序

    1 expect程序 用的Ubuntu,本身没带expect,安装. sudo apt-get install expect (关于expect,参见http://www.tclchina.com/a ...

  5. 【DB2】How to resolve SQL20249N the statement was not processed with error

    相关链接 https://vinaysdb2blog.blogspot.com/2017/11/how-to-resolve-sql20249n-statement-was-not-processed ...

  6. Python 日期和时间的几种输出格式

    在python中,我们可以使用 time 模块的 strftime 方法来格式化日期,例子如下: import time # 格式化成2016-03-20 11:45:39形式 print (time ...

  7. Android Studio打开项目提示找不到sdk路径的问题。

    问题如图: 这是由于所打开的项目不是本机创建的,所使用的sdk路径不一致所导致. 解决方案: 打开项目所在目录,找到local.properties文件并打开,发现sdk.dir=D\:\\Andro ...

  8. 前端通信:ajax设计方案(二)---集成轮询技术

    上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工 ...

  9. ActiveMQ HelloWorld入门

    在P2P的消息模型中,双方通过队列交流,一个队列只有一个生产者和一个消费者.a.消息生产者 package com.ljq.durian.test.activemq; import javax.jms ...

  10. CSS的定位问题总结

    CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许 ...