首页 > 代码库 > vue开发框架搭建(详细版)

vue开发框架搭建(详细版)

环境搭建

1、安装node.js:

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

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

2)如果你是linux系统,那安装方式就很多了,具体可以参考:

https://nodejs.org/en/download/package-manager/

查看是否安装成功:

$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 <my-project-name> 

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

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

框架结构如下:

技术分享 

 

 

 

 

 

 

 

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

$cd myvue

$cnpm install

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

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

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

4、验证是否成功搭建框架:

启动vue

$npm run dev

看到下面美丽的页面,那么恭喜你,顺利开启了vuejs的世界

 技术分享

vue开发框架搭建(详细版)