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的目录,里面有很多的依赖包。