vue学习01

万事开头难~

刚开始学习vue.js就是看看官方文档，然后在.html文件里引入下载到本地的vue的库文件，来跟着敲示例代码。但是接触到vue的项目，发现自己完全不知从何下手。之后再网上查找了一些vue开发环境搭建的教程，跟着把环境搭建好了，现在梳理总结一下，以免忘记。

步骤如下：

1.安装node.js
官网地址：https://nodejs.org/en/download/
根据需要选择下载，安装时一直点下一步就好（傻瓜式安装），安装路径可以自定义。
检测：命令窗口（win+R 运行cmd）输入命令 node -v，出现版本号则说明安装成功。
npm包管理器是集成在node中，所以输入命令 npm -v，如果出现版本号，说明npm也安装好了。

2.设置global和cache路径
设置路径能够把通过npm安装的模块集中在一起，便于管理。
（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹
（2）假设安装目录为E:\nodejs，在命令窗口分别输入以下命令

npm config set prefix "E:\nodejs\node_global" 设置global

npm config set cache "E:\nodejs\node_cache" 设置cache
1
2
3
设置成功后，后续用npm安装的模块就在E:\nodejs\node_global\node_modules里。

3.设置环境变量
说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。
（1）修改用户变量PATH：把”E:\nodejs\node_global”加到后面。
（2）新增系统变量NODE_PATH：设置成“E:\nodejs\node_global\node_modules”。

4.安装淘宝镜像（cnpm）
由于，npm很多包部署在国外，使用cnpm可以加快我们的安装速度。
官网：http://npm.taobao.org/
安装命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org
1
检测：命令窗口输入 cnpm -v，出现版本号，说明安装成功。

5.安装 vue 和 vue脚手架构建工具（vue-cli）
说明：简单来说vue-cli的作用是用已经配置好的模板快速构建一个项目，提供好基本的项目结构，不必我们自己手动配项目环境。
此时我们可以使用cnpm安装，安装命令（-g是指全局安装）：

cnpm install -g vue
cnpm install -g vue-cli
1
2
至此，我们已经搭建好了vue项目开发所需要的环境以及工具了，接着，我们尝试新建一个vue项目并运行。

6.新建一个vue项目并运行
打开命令窗口，cd至新建项目的目录，比如（cd F:\vue），输入新建项目命令：

vue init webpack test 创建一个基于webpack的vue项目
1
webpack是vue-cli已经包含的一个打包工具。执行这个命令后会出现一系列的选项如下：

Project name ；项目名称
Project description (A Vue.js project) 项目描述 （A Vue.js project）；
Author (XXXX XXXX@XXX.com) ;XXXX@XXX.com(项目作者)；
Vue build ❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any
Vue-specific HTML) are ONLY allowed in .vue files - render functions
are required elsewhere
这里选择Runtime + Compiler: recommended for most
users；
Install vue-router? (Y/n) 是否使用vue-router路由（y）；
Use ESLint to lint your code? (Y/n) 是否使用ESLint（n）；
Setup unit tests with Karma + Mocha? (Y/n) 是否需要单元测试（n）；
Setup e2e tests with Nightwatch? (Y/n) 是否需要单元测试(n)；
接着安装项目依赖的模块，这些模块会被安装到 test\node_modul下，
node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules。
先cd到项目文件所在目录，然后输入安装命令：

cnpm install
1
最后运行项目，同样cd到项目所在目录，输入运行命令：

cnpm run dev
1

完成之后，在浏览器地址栏输入 http://localhost:8080 ，出现下面这个页面就说明项目运行成功。

————————————————
版权声明：本文为CSDN博主「amaoagou_0124」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/amaoagou_0124/article/details/80394930