使用vue脚手架vue-cli搭建项目

在使用vue-cli快速搭建一个项目前,首先我们要清楚为什么要这样做,原因很多,如:

  1. 前端的范畴不断扩大
  2. 前后端分离
  3. 模块化开发
  4. 便于管理...

我个人再加一点,就是便于".vue"组件的开发,原因:

在不使用Vue工程化开发的时候,我们的组件经常性的就是"全局 / 局部"组件的开发,很多的js和css并不是一起加入的,但是工程化的开发就解决了这个问题(就是".vue"单文件组件)。以这个后缀的文件为例,它是包含了三个部分,分别是(template、js、css),这样的话,就可以通过工程化里面的转码器自动转化为它自己对应的html、js、css了,省去了很多麻烦。

觉得我说的不是太明白的同学,可以参考Vue的官方文档仔细阅读:=>https://cn.vuejs.org/v2/guide/single-file-components.html

那么在引入快速开发一个项目之前,我们需要了解些什么:

  1. node
  2. es6
  3. vue.js已经有了一个比较熟悉的认识

不过由于npm安装依赖速度有些慢,推荐使用国内阿里的淘宝镜像安装:=>https://npm.taobao.org/,具体步骤可以参考下图:

 等待所有的都安装完毕之后,我们可以通过 cmd 进入指定的目录下通过 vue-cli 下载安装整个项目的模板,命令行如下:

引入:当你全局安装vue-cli之后,运行vue命令,如果提示vue command not found 后,说明vue没有安装成功,这个时候重新输入cnpm install vue-cli -g基本上就都能解决了

其中第二行命令的"my-project"就是你为自己下载的这个项目的命名,然后cmd里会出现对这个项目的各种描述信息,一路enter默认就好了,如图:

然后我们等正下方的进度条跑完之后,通过第三行命令进入这个项目,接着通过最后一行命令把这个项目跑起来(如果cnpm已经安装,npm是可以替换成cnpm的),最后会输出这样的一条信息,如图:

然后粘贴http链接信息,并在浏览器窗口里复制打开。

完整的步骤如下:

转载请注明链接:=>http://www.cnblogs.com/zxn-9588/p/8919579.html 

原文地址:https://www.cnblogs.com/zxn-9588/p/8919579.html