Vue.js系列之项目搭建(1)

邓欣德

2023-03-14

本文向大家介绍Vue.js系列之项目搭建(1)，包括了Vue.js系列之项目搭建(1)的使用技巧和注意事项，需要的朋友参考一下

说明：

我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。

今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版，因为是第一次使用vue，而且一开始使用的时候2.0出来一个月不到，很多坑都是自己去踩的，现在项目要上线了，所以记录一些过程。
（这是首页目前的效果图）

项目搭建具体步骤如下：

1.安装node

到官网下载安装，我这里是win7系统。

（中）https://nodejs.org/zh-cn/

（英）https://nodejs.org/en/

2.安装cnpm镜像

（node自带安装了npm，故不再安装）

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

安装模块时安装方法

$ cnpm install [name]

3.快速学习Vue2.0教程

（中）http://cn.vuejs.org/

（英）https://vuejs.org/

你要是觉得这些网站访问速度都比较慢的话可以移步国内开发者自己翻译的网站：https://vuefe.cn/

4.安装Vue2.0

$ cnpm install vue

5.安装vue-cli 脚手架工具

$ cnpm install --global vue-cli

6.在某个目录下，创建一个基于 webpack 模板的新项目

$ vue init webpack my-project
//my-project是你的项目名

7.安装依赖

$ cd my-project  //到项目目录下
$ cnpm install  //安装依赖

8.运行新创建的vue项目

$ npm run dev

运行之后会看到vue的初始页面效果，如下图，说明你就成功搭建了一个vue项目。（下面框出来的是官方提供的插件和awesome，很实用）

注意事项：

1.安装Git(可选)

如果你熟悉或者想要学习了解Git，可以在安装node之前先安装Git，使用Git Bash代替windows的cmd命令面板。如果你用windows的cmd命令行工具，则以上安装命令前的“$”省略。

Git官网：https://git-scm.com/

Git国内教程推荐：http://t.cn/zQ6LFwE

2.不应用ESLint

创建webpack模板项目时，如果你对ES6和ESLint不是很熟的话我个人不建议你应用它，因为要求比较严格，所以一不小心就报错，导致整个项目运行不起来，对于初学很痛苦。

总结

今天主要分享了一下从无到有创建一个vue项目，接下来我会通过自己的实际项目操作过程，分享我们是如何完成的。