如何安装vue.js以及创建第一个vue项目

版权声明：Jerry原创 https://blog.csdn.net/qq_34532187/article/details/83043488

本次的主题是如何安装vue.js以及创建第一个vue项目

现在前端主流的有三大框架，vue，angular，react，vue是国人大牛创建的，一开始的定位是依赖库，但发展到目前已经是一个成熟的前端框架了，所以我们有必要了解一下这个vue。

首先vue是一个"MVVM框架（库）"，MVVM就是Model-View-ViewModel的简写，vue和angular和react类似，相比angular小巧，比较容易上手
vue的核心库"只关注视图层"，并且"非常容易学习"，非常容易与其他库或者已有的项目整合，另一方面，vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页面应用

那如何创建一个vue项目呢，我们从下载node.js开始
node.js官网下载地址：https://nodejs.org/en/
选择推荐的或你想要的版本下载，下载完后，安装路径自定义，自行安装。
安装好以后我们要进行一系列的配置

首先配置npm，在安装目录下新建两个文件夹.
一个叫node_cache
一个叫node_global
因为如果不建这个global文件夹，以后在执行安装时比如：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中。而cache则是用来防止缓存的。

注意还有一点，我们要在node_global中在建立一个node_modules的文件夹来存未来我们安装的东西，比如express和vue.cli。

接下来就是环境变量的配置
老生常谈。我的电脑->属性->高级属性设置->设置环境变量
新建一个系统变量NODE_PATH，把
C:\Program Files\nodejs\node_global\node_modules写进去

接着是用户变量的path
在末尾加入C:\Program Files\nodejs\node_global

还要注意修改一个东西，这个东西在C:\Program Files\nodejs\node_modules\npm文件下，叫做npmrc。用notepad打开修改如图

配置好这些，我们打开cmd
输入note -v
如果有版本信息输出说明node安装成功。
接着我们输入一下两句来配置 npm
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”

然后我们开始安装我们需要的vue.cli。
这是vue.js的脚手架，用来帮我们建立模板的。
命令：npm install -g vue-cli
记得我们要用管理员模式打开cmd，否则会有一些权限问题报错。

安装完成以后，我们输入vue，就会有一些帮助命令说明的输出。

输入 vue list
就会有一些可用模板的展示，我们选择安装webpack
命令：vue init webpack demo(demo是自己起的名字)

然后按照指示输入name 和 description，按回车
下面的都可以直接输入y，也就是yes来确定使用。

cmd中可以输入dir来查看项目中生成了哪些文件目录结构。
回到demo下
输入：npm install
过程会有些慢，加载依赖。
安装成功后，会发现多一个node_modules文件夹。
node_modules里面放了我们依赖的代码裤。
最后我们输入：npm run dev
我们会看到

8080端口打开了
我们去浏览器中打开localhost：8080去看一下

创建成功。

如果大家还有问题，可以留言，我都会解答。

阅读更多