vue开发框架搭建（详细版）

vue开发框架搭建（详细版）

环境搭建

1. 安装node.js:

   可以从官网下载各种系统下的安装包，地址：nodejs.cn/download/

   1）如果你是window系统，那简单了，直接下载.msi安装文件安装即可愉快的使用

   2）如果你是linux系统，那安装方式就很多了，具体可以参考：

   nodejs.org/en/download…

查看是否安装成功：

$node -v
复制代码

2. 安装npm

   目前nodejs版本已经集成安装npm的包管理工具，所以无需额外再安装,查看安装是否成功：

   $npm -v                          
   复制代码

   注意：国内网络情况，直接npm安装包一般会慢的让你抓狂，这时候，你要么FQ，要么通过国内npm源进行安装，如：淘宝https://npm.taobao.org 方便起见，可安装他们定制的cnpm命令行工具来代替npm（如果你目前环境连taobao域名都访问不上，那你可以使用后面提供的其他国内源进行指定安装npm包即可），后面包的安装都基于cnpm命令进行安装

   $ npm install -g cnpm --registry=https://registry.npm.taobao.org
   复制代码

   同时推荐使用yarn管理工具

   Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样，它的目的是解决这些团队使用 npm 面临的少数问题，即：

   安装的时候无法保证速度/一致性 安全问题，因为 npm 安装时允许运行代码 我们可以用npm 下载yarn

   npm install -g yarn
   复制代码

获取框架

基础的工具及需求环境已经讲完，现在开始获取vue脚手架，通过安装npm模块vue-cli，就可以进入神奇的vue+webpack构建世界了:

1. 安装vue-cli命令行包模块

   $ cnpm install -g vue-cli;
   复制代码

2. 获取vue+webpack基础框架

   $vue init webpack  
   复制代码

   获取框架时，会出现一些选项选择，直接回车选择默认值；

   以上完成基础框架的获取，但只是一个框架，就像一个人的骨架，现在我们还需要给这个骨架添加丰富多彩的内容。

   框架结构如下：

3. 进入你刚创建的框架目录，安装需要的包及所有依赖关系：

   $cd myvue
   $cnpm install
   复制代码

   静静的等待下载项目所需的依赖包

   完成npm模块包的下载，在文件package.json你可以查看你都下了哪些模块以及他们各自的版本号信息

   注意：安装模块包过程如果出现报错，最好删掉整个模块目录node_modules/，重新安装一遍，因为很多依赖如果没有顺利安装ok，容易出现莫名其妙的问题。

4.验证是否成功搭建框架： 启动vue $npm run dev 看到下面美丽的页面，那么恭喜你，顺利开启了vuejs的世界