我的 Vue.js 学习日记 （九） - 安装并使用vue-cli搭建vue项目

前言

首先呢，不得不说，用VS2013做vue的开发真的很不舒服，经过一些询问，最终我选了webstorm，我当时是这么咨询的：“什么IDE比较适合做前端，并且感知够强大？”哈哈哈~

再一个，网上很多关于vue的例子即看不懂，又跑不起来，让人很抓狂！这让我认识到必须强化一下编辑器了...我的底子太薄，语法靠查，所以这方面只能靠外力啦...

最后啦，其实也算是一个并不是必须但很让人难受的问题，就是所有的组件都写在一个地方真的很难受（并不排除是自己技术的原因不会分离），经过一些查询，最终发现通过vue-cli脚手架可以很好的解决这个问题。

安装Node.js

why Node.js ?

更加深入的原因我不知道，我只知道，我要使用vue-cli，那么有什么联系吗？

1.vue-cli需要npm

2.npm需要Node.js

目标是明确的，那么一步一步走

1.安装Node.js

不用去搜索了，我把下载连接拉过来： Node.js中文网

就当他是一个软件，一路Next安装就是了

安装vue项目

1.全局安装webpack

首先感谢柠檬，您的笔记很好，一目了然

https://segmentfault.com/a/11...

再然后感谢李洪威，您的笔记很细

https://segmentfault.com/a/11...

这里需要用到cmd,我没有用过mac，所以windows上win + r输入cmd回车，打开命令窗口
输入以下命令

npm install webpack -g

-g表示全局安装，那么什么是全局？其实就是安装到node.js指定的位置，然后cmd在哪个路径都可以使用

2.配置淘宝镜像（可选）

为什么说可选，npm的install都是走的下载，有时候下载速度太慢的话，通过配置淘宝镜像可以提速

配置分3步：

1. 配置 npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 应用 cnpm install express
3. 使用 之后的凡是npm 都 改为cnpm

这个时候最好关闭cmd重新打开

3.安装vue-cli脚手架

首先，什么是脚手架？这个问题最开始在日记一的时候我已经疑问过，那么现在我已经大概知道他是什么了。

vue-cli脚手架：

1. 他与webpack一起工作
2. 他提供了一套基础的、可直接使用的vue项目模板

安装方式：

npm install -g vue-cli

4.init 一个基于vue的webpack项目

我比较喜欢先有文件夹，然后在初始化项目的顺序，所以：

1.首先在一个自己喜欢的位置创建一个项目文件夹例如:E:\seaconch\projects\diaries，我在这里创建了一个项目文件夹

2.关闭cmd重新打开一个（因为这样做后我们看到的下面代码肯定是一样的），在cmd中进入该目录：

1. C:\Users\Administrator>e:
2. E:\>cd E:\seaconch\projects\diaries

tip:win7下按着Shift + 鼠标右键可以直接在此文件夹位置打开cmd,win10那个不太好使

初始化方式：

vue init webpack

?Generate project in current directory?(Y/n) y
在当前路径生成项目？

?Project name (diaries) vueProject
这是项目名字，我的叫vueproj

?Project description (A Vue.js project)
项目描述，可以不写

?Author
作者，可以不写

?Vue build (Use arrow keys)
两种方式，选默认的，运行时+编译器

?Install vue-router?(Y/n)y
是否安装路由，安装吧

?Use ESLint to lint your code?(Y/n) y
是否使用ESLint统一编码风格，是吧，然后回车选默认的

?Set up unit tests(Y/n)n
单元测试，我不会写，所以不选了

?Setup e2e tests with Nightwatch?(Y/n) n
也是一个测试相关

?Should we run 'npm install' fro...been created?
Yes,use NPM
选NPM安装

等安装...

现在我的E:\seaconch\projects\diaries路径下出现了很多的文件，这就是一个vue项目

5.运行

运行init之后生成的项目（前提是cmd在项目路径下）：

npm run dev

成功后提示：DONE Compilied successfully in 3597ms，并且得到一个路径：http://localhost:8080/#/，访问这个路径就可以查看项目了

tip: npm run dev类似调试运行的意思，此外还有npm run build 该命令在发布项目时候使用，他会在项目路径下生成一个dist文件夹，发布项目是会用到该文件夹

试开发

使用webstorm打开生成的项目文件夹

关于脚手架生成的项目的一个基本的认识是这样的（更具体的先不去了解）：

1. index.html 可以看到熟悉的 id="app" 这里应该是项目的挂载点
2. src - main.js app的实例再此处声明
3. src - App.vue 根组件
4. src - router - index.js 路由配置
5. src - components - HelloWorld.vue HelloWorld.vue组件

打开HelloWorld.vue文件

我看的了<h1>{{ msg }}</h1>，找到msg所在的data，修改他的值试试

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '你好 seaconch, 你今天的目标达成了吗？'
    }
  }
}

中间写了这么多，npm也乱敲一通忘了刚才什么状态了，从头来吧。

打开cmd，进入项目文件路径，输入：npm run dev调试运行项目

tip:win7的话别忘了Shift + 右键快捷打开

在浏览器输入：http://localhost:8080/#/

题外话：刚开始不知道怎么停止运行项目，每次都是关闭重新打开...总结：

1. 编辑过的代码在从编辑器切换到浏览器的时候自动重新编译项目
2. Ctrl + C 可以停止运行项目
3. 那个cmd窗体不要关，他在充当一个临时服务器，关了就不能在访问网站了...

小节

vue-cli是一个项目基架，他可以让我快速的搭建一个可运行的项目

今后的学习将都基于该基架进行展开