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

条件:
node在4.以上,npm在3以上

安装步骤:
1、cmd打开命令行窗口
2、输入cnpm install vue-cli -g,然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)
3、安装结束后输入vue 如果显示版本号继续下一步操作
4、运行vue init webpack demo(注:项目名称)回车
5、显示Project nanme 目录名 回车 project description 后面可以写上描述,或者直接回车
Author 后面可以写作者也可以回车 
6、Install vue-router? 选择Y
7、User ESLint to lint your code? 选Y
8、Setup unit tests with Karma + Mocha? 问的是否要测试 选n
9、Setup e2e tests with Nightwatch? 选n
10、这个时候在你创建的目录下就有你的目录了,然后cd 你的目录名进去cnpm install回车等待,这一步是安装依赖的,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件,如果这个文件夹没有那么项目是没办法跑

起来的
11、创建结束后在创建目录里面按住shift+右键 选择 在此处打开命令窗口 输入npm run dev启动应用,启动成功它会自动打开一个vue页面
12、每次这样启动是很麻烦的,用开发工具加载整个项目,里面有个package.json,它我整个项目的配置和信息的描述,里面有个scripts,这是定义的一些脚本,刚才用的就是里面的dev,它会执行后面的东西,就是用node跑一个JSON文件
13、在项目中,右击package.json选择show npm scripts,显示npm后,双击命令即可

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

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

Vue-cli的安装步骤详细版本的更多相关文章

  1. 超详细oracle 11g安装步骤 win版本

    1. 打开网址: https://edelivery.oracle.com 使用oracle 任意账号登录 账号:2696671285@qq.com 密码:Oracle123 感谢来自某位好心大佬的共 ...

  2. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  3. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  4. TFS2008 安装图解(详细版本)(转载)

    由于公司准备上TFS,最近开始学习搭建TFS环境,并为同事讲解TFS的使用,在虚拟 机中搭建测试环境,遇到了很多问题,总结成一篇博客,跟大家交流一下: 我是从微软公司官方网站下载的TFS 2008 1 ...

  5. PowerDesigner 15.1 安装步骤详细图解及破解

    准备工作: 下载 PowerDesigner 15.1 的安装文件和破解文件 PowerDesigner 15.1 下载地址:http://pan.baidu.com/share/link?share ...

  6. Nginx安装(详细版本)

    Nginx安装文档 前言: 最近,系统部署人员那边,让我们给写一个傻瓜式的Nginx安装过程.所以就有了这个文档,本着独乐乐不如众乐乐,就分享一下.我觉得对入门小白来说,有图,乃至运行过程图,是很重要 ...

  7. CentOS 7 中英文桌面安装步骤详细图解

    https://www.cnblogs.com/haoliyou/p/7694868.html

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

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

  9. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

随机推荐

  1. (HY000): Can't connect to MySQL server on '129.28.149.240' (113)

    环境 mysql5.7 ubuntu 一. 解决方法 1.首先确保mysql开启了远程授权:https://blog.csdn.net/cryhelyxx/article/details/401146 ...

  2. python基础知识1

    1.何为json? json 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机 ...

  3. Java Web学习总结(8)JSP(二)

    一,JSP中的九个内置对象 名称 类型 描述 out javax.servlet.jsp.JspWriter 用于页面输出 request javax.servlet.http.HttpServlet ...

  4. 【HDOJ6578】Blank(DP)

    题意:一个长为n的序列,每个位置上的值是0,1,2,3中的一个,有m个限制条件,限制位置[l[i],r[i]]中不同的数值有x[i]个,问方案数MOD 998244353 n<=100,m< ...

  5. vue工程本地代码请求http发生跨域提示错误解决方法

    这个可以使用代理进行跨域,这样看来跨域的方法就有几种了,对于iframe中的用postmassage,对于vue工程中的跨域则使用代理模式. 代理模式配置如下: 在config文件夹下找到index. ...

  6. 【SpingBoot】 测试如何使用SpringBoot搭建一个简单后台1

    很久没写博客了,最近接到一个组内的测试开发任务是做一个使用SpringBoot 开发一个后台程序(还未完成),特写感想记录一下 1. 为什么选择SpringBoot ? 首先是目前很多公司的后台还是J ...

  7. Ascii Chart

    Char Dec Oct Hex | Char Dec Oct Hex | Char Dec Oct Hex | Char Dec Oct Hex -------------------------- ...

  8. 用C语言给指定的内存地址赋值(通过指针)

    这两天找工作,做面试题的时候,碰到这样的题:指定了一个地址,比如说0x0012ff7c这样一个地址,要求是给这个指定的地址赋一个确定的值,比如说100,当时就是一个郁闷啊,在汇编里这样用过,在c中还真 ...

  9. C#获取文件夹/文件的大小以及占用空间 转摘自:http://www.cnblogs.com/chenpeng-dota/articles/2176470.html

    C#获取文件夹/文件的大小以及占用空间 今天,头给了个任务:写个方法,我会给你个路径,计算这个路径所占用的磁盘空间 . 然后,找了很多资料.但大部分都是获取文件夹/文件的大小的.对于占用空间的没有成品 ...

  10. 安装软件 学习linux命令

    nm -D /usr/lib64/libstdc++.so.6 | grep GLIBCnm dumps named symbols, -D for dynamic libs, and grep fo ...