vue学习过程总结（01）- 开发环境的搭建

1.本地vue开发环境的搭建

　　1.1.下载NodeJs.下载地址：https://nodejs.org/en/download/

　　　　node.js的相关结束以及教程：https://www.runoob.com/nodejs/nodejs-tutorial.html

　　　　关于nodejs不做其他相关介绍，学习vue需要用的是nodejs安装时里面带的npm命令，关于npm的详细资料可以看这里https://www.runoob.com/nodejs/nodejs-npm.html，简单说就是包管理工具，vue开发用到的包都是通过npm的一些命令来安装的。

　　1.2.安装并配置环境变量。个人习惯将环境变量配置在用户环境变量的里面，如：path：C:\Program Files\node-v12.13.1\;

　　　　配置环境变量的好处是带cmd命令窗口中无论在何位置都可以输入npm的命令。

　　1.3.测试nodejs(npm)是否安装成功。打开cmd命令，输入：

npm -v

　　由于 npm的服务器在国外所以安装速度慢，可以使用淘宝的镜像及其命令 cnpm（非必须）。关于npm的相关中文文档：https://cloud.tencent.com/developer/section/1490235，这也是一个新的点。

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

npm 版本需要大于 3.0，如果版本低于3.0，可以使用下面的命名升级npm，或cnpm或者重新下载高版本的nodejs

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

　　1.4.安装vue

# 最新稳定版
$ npm install vue

# 或者用cnpm
cnpm install vue

2.快速搭建大型单页应用。

单页应用:只有一个页面，页面中的内容会根据路由来显示（个人理解）。

多页应用：页面是通过URL跳转到新的页面（个人理解）。

vue相关的教程：https://www.runoob.com/vue2/vue-tutorial.html

　　2.1.安装vue脚手架vue-cli

# 全局安装 vue-cli
$ cnpm install --global vue-cli

　　2.2.创建一个简单的vue项目。

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

　　2.3.启动vue项目

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

　　注意：cnpm install如果失败可以试试npm install，如果用的是公司内网需要配置外网代理，否则也会失败，配置代理命令。

# 无需验证
npm config set proxy http://proxyserverip:port
npm config set https-proxy http://proxyserverip:port

#需要验证
npm config set proxy http://username:password@proxyserverip:port
npm confit set https-proxy http://username:password@proxyserverip:port

install成功后会发现在项目的根路径会有一个名为node_modules的目录，里面有很多的依赖包。

vue学习过程总结（01）- 开发环境的搭建

推荐阅读