vue1.0到2.0

vue2.0 新手教程(一)

 

想想自己写vue的项目也写了一年了,从vue1.0到2.0,走过不少路,填过不少坑,

下面记录一下新手从0到1的过程,本文“应该”会持续更新

首先安装vue的运行环境node

1、下载Nodejs并安装(下载传送门

下载安装完了之后到cmd里面运行一下命令

node

看到没,可以node回车之后,可以像chrome的console面板一样去执行命令。

2、安装淘宝镜像

node安装完毕,自带npm(NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题),

但是,你身处“天朝”,要加载国外的包,那是要慢成狗,所以这里推荐安装淘宝镜像(安装完后npm 都可以用cnpm代替了),命令如下

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装vue脚手架vue-cli

到这里你就可以安装脚手架准备初始化一个项目了,脚手架的安装很简单

cnpm install vue-cli -g

这里的 -g 是全局安装

4、项目初始化

注意接下来你将看到自己的真正的项目了,先cd到你的项目目录这里假设你的目录是d:workspace/

然后执行

vue init webpack myproject

这里的myproject是你的项目名字,随便叫啥,当然也可以用简装版

vue init webpack-simple myproject

回车后会看到这些

很简单,不懂啥意思的话就查词典去,就是一些项目名称,描述,作者之类的,你可以修改也可以直接回车忽略,

然后下面那个框就要选择了,是否要安装vue-router(vue全家桶中的路由模块),一般是需要的,所以输入Y,

在下面的就是一些代码检查,测试什么的,我都是选择no,因为麻烦。OK继续回车看到如下

项目初始化成功了

5、运行项目

按照上面那个红色框的提示,先cd到你的项目目录,这里是test ,也就是

cd test

进来后安装依赖,执行(下面我们用到cnpm了哦,因为快)

cnpm install

酱紫就安装完毕了,接下来就是见证奇迹的时刻,执行命令,开始运行你的项目

cnpm run dev

完成,浏览器自动打开了你这个路径

恭喜你,你的demo就这样完成了,然后再去你的test项目里面瞧瞧它的代码,目录结构等等,

尝试着改改里面的代码(玩一下app.vue),看看浏览器有啥变化

本章终~~~

 
 

vue1.0到2.0的更多相关文章

  1. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  2. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  3. vue1.0与vue2.0对于v-for的使用的区别

    vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...

  4. Vue1.x 到Vue2.0的一个变化

    小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说  进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码  组件中模板: 之前:     <templa ...

  5. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...

  6. vue.js学习:1.0到2.0的变化(区别)

    一.生命周期 1.1.0的生命周期: 周期 解释 init 组件刚刚被创建,但Data.method等属性还没被计算出来 created 组件创建已经完成,但DOM还没被生成出来 beforeComp ...

  7. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其 ...

  8. 创建或打开解决方案时提示"DotNetCore.1.0.1-SDK.1.0.0.Preview2-003131-x86"错误的解决方案

    提示"DotNetCore.1.0.1-SDK.1.0.0.Preview2-003131-x86"错误的解决方案: 1.检查是否有C:\Program Files (x86)\d ...

  9. Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead的解决办法

    今天在导入工程进Eclipse的时候竟然出错了,控制台输出的是: [2013-02-04 22:17:13 - takepicture] Android requires compiler compl ...

随机推荐

  1. Javascript实现倒计时和根据某时间开始计算时间

    JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7',' ...

  2. 动态规划DP的优化

    写一写要讲什么免得忘记了.DP的优化. 大概围绕着"是什么","有什么用","怎么用"三个方面讲. 主要是<算法竞赛入门经典>里 ...

  3. 【转】Keil ARM开发 error L6236E错误解决

    顺利创建了第一个Keil工程却发现不能完成链接,出现了一个下面这样的报错: .\Objects\demo_simple.sct(7): error: L6236E: No section matche ...

  4. 【codevs1065】01字符串

    题目大意:输出仅由 0 和 1 组成的长度为 N 的字符串个数,并且其中不能含有 3 个连续的相同子串. 题解:数据太水,正规解法应该是枚举后缀进行判断. 代码如下 #include <bits ...

  5. ssm controller层 junit单元测试

    原文链接:https://www.cnblogs.com/oucbl/p/5943743.html springmvc controller junit 测试 作者:blouc@qq.com本文为作者 ...

  6. CentOS 7.4 java验证码乱码的问题

     转载阿里云 摘要: 新服务器配置发布网站 配置后程序顺利启动在登录时发现验证码无法识别显示出了图片,但是字是乱码 初步估计应该是字体问题 ssh登录服务器查看默认字体 #fc-match msam1 ...

  7. 常用日期计算SQL语句

    -- 本月的第一天 SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) -- 本月的最后一天 SELECT DATEADD(ms,-3,DATEADD(mm ...

  8. POJ 2965 The Pilots Brothers' refrigerator (暴力枚举)

    https://vjudge.net/problem/POJ-2965 与poj-1753相似,只不过这个要记录路径.poj-1753:https://www.cnblogs.com/fht-lito ...

  9. bzoj千题计划223:bzoj2816: [ZJOI2012]网络

    http://www.lydsy.com/JudgeOnline/problem.php?id=2816 每种颜色搞一个LCT 判断u v之间有边直接相连: 如果u和v之间有边相连,那么他们的深度相差 ...

  10. python学习笔记7-excel操作

    一.操作excel import xlwt book = xlwt.Workbook() #新建一个excel sheet = book.add_sheet('sheet1') #添加一个sheet页 ...