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. 去除html代码中的标签

    public static String htmlText(String inputString) { String htmlStr = inputString; //含html标签的字符串 Stri ...

  2. “context:include-filter”与“context:exclude-filter”标签作用解释

    注意到spring中<context:component-scan>标签中会出现include和exclude的子标签,具体是做什么用的? spring的配置文件与springmvc的配置 ...

  3. (转)AIX光盘备份与恢复

    AIX光盘备份与恢复 在此之前,说明一下光盘映像的格式UDF和ISO9660 ISO9660: 这是国际标准化组织(ISO)于1985年颁布的通用光盘文件系统.目前使用最广泛的光盘文件系统,能被所有的 ...

  4. Apache JMeter2.13 实战

    安装目录下 设置浏览器代理127.0.0.1 8080,以chrome为例 开始录制脚本,进入应用点击相应的功能,可以捕获到如下地址 去除无用地址,保留需要测试的地址 注:上图编号列表中11为获取co ...

  5. list转换为树结构--递归

    public static JSONArray treeMenuList(List<Map<String, Object>> menuList, Object parentId ...

  6. Android 开发工具类 06_NetUtils

    跟网络相关的工具类: 1.判断网络是否连接: 2.判断是否是 wifi 连接: 3.打开网络设置界面: import android.app.Activity; import android.cont ...

  7. Chapter 5. Conversions and Promotions

    JLS解读:https://docs.oracle.com/javase/specs/jls/se7/html/jls-5.html 基本数据类型的转换 1) boolean不可以转换为其他的数据类型 ...

  8. asp.net页面传值方法汇总

    1. Get(即使用QueryString显式传递)     方式:在url后面跟参数.     特点:简单.方便.     缺点:字符串长度最长为255个字符:数据泄漏在url中.     适用数据 ...

  9. 《垃圾回收的算法与实现》——GC复制算法

    基本概念 GC复制算法将堆分成From和To两个内存块,当From被占满时GC将From中的存活对象复制到To中,同时将From和To交换. 通过递归遍历GC root(即采用深度优先)复制存活对象, ...

  10. Java 生成指定范围的随机数

    /** * 生成[min, max]之间的随机整数 * * @param min 最小整数 * @param max 最大整数 * @return * @author jqlin */ private ...