目前做到前端,计划用vue做前端,于是必不可少需要搭建开发环境。
我在网上看到的Vue2.0的windows开发环境需要包括Node.js,npm,webpack,vue-cli。
其中Node.js为Javascript运行环境(runtime),npm为Nodejs下的包管理器,webpack用于翻译Vue组件并打包成.js文件,vue-cli用来生成模板的Vue工程(也就是封装了类似的脚手架)。
安装Node.js和npm
Node.js内含npm,Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/。
我这里安装的版本比较新,安装过程很简单,安装成功之后可以在命令行中查看Nodejs版本和npm版本:
node --version
v12.13.1
npm -v
6.12.1
npm配置
如果是在国内,网上说直接使用npm的官方镜像非常慢,所以推荐使用taobao的npm镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以直接使用cnpm来安装依赖包了。
而我需要设置代理,直接使用npm官方镜像。
查看当前npm配置:
npm config ls -l
可以在其中看到proxy和registry。
设置代理:
npm config set proxy http://ip:port/
注意不要设置https-proxy,如果手贱,在安装包时会出现下面错误:
npm ERR! network request to https://registry.npmjs.org/*** failed, reason:
lient network socket disconnected before secure TLS connection was established
安装webpack和vue-cli
根据各自情况,使用npm或者cnpm:
# 安装webpack
npm install webpack -g
# 安装vue-cli
npm install vue-cli -g
就此,我认为简单的前端Vue开发环境设置完成。下面就要开始Vue的学习和开发了。
第一个Vue项目
使用vue命令创建一个Vue项目
D:\TestFiles\VUE>vue init webpack-simple vueDemo2
? Project name vuedemo # 项目名
? Project description A Vue.js project #描述,可省略
? Author zhuow <******> #作者,可省略
? License MIT #默认
? Use sass? No #默认
vue-cli · Generated "vueDemo2".
To get started:
cd vueDemo2
npm install
npm run dev
创建成功,可以看到提示,如何运行此Vue项目。
# 进入我们创建的项目
cd vueDemo2
# 自动安装依赖包
npm install
网上说这里一定要使用npm从官方仓库安装,如果使用cnpm从国内仓库安装,会导致后面缺少一些依赖库,我并没有测试,如果有小伙伴测了,请在评论中告诉我。
# 运行第一个Vue项目
D:\TestFiles\VUE\vueDemo2>npm run dev
> vuedemo@1.0.0 dev D:\TestFiles\VUE\vueDemo2
> cross-env NODE_ENV=development webpack-dev-server --open --hot
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do
not use the open flag.
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
我们可以看到提示,通过http://localhost:8080/即可访问。
Demo完成!