Vue开发之环境搭建
一、Vue开发所需要的环境1. nodejs:javaScript运行环境2. npm:nodejs下的包管理器(是国外的,在国内使用会很慢),可以使用国内的淘宝npm镜像。3. webpack: 把无法直接在浏览器中使用的语言(如es6,sass)编译成浏览器支持的形式,资源的合并、压缩混淆。4. vue-cli:直接构建vue项目。二、环境搭建步骤nodejs安装直接...
·
一、Vue开发所需要的环境
1. nodejs:javaScript运行环境
2. npm:nodejs下的包管理器(是国外的,在国内使用会很慢),可以使用国内的淘宝npm镜像。
3. webpack: 把无法直接在浏览器中使用的语言(如es6,sass)编译成浏览器支持的形式,资源的合并、压缩混淆。
4. vue-cli:直接构建vue项目。
二、环境搭建步骤
- nodejs安装
直接在nodejs官网下载安装,安装完之后打开cmd输入node -v可以查看node版本,显示node版本说明已经安装成功。
- npm版本
安装nodejs成功之后输入npm -v就可以查看npm版本。
- 安装cnpm
输入指令npm install -g cnpm –registry=http://registry.npm.taobao.org,然后回车进行安装。安装完之后输入cnpm -v查看版本信息。
- 安装vue-cli
输入指令npm install -g vue-cli进行全局安装vue-cli。
- 使用vue-cli构建一个vue项目
在终端输入进入项目的存放地址,然后输入输入指令vue init webpack firstvuedemo(firstvuedemo是项目名称,最好小写字母,首字母小写后面有大写字母会报错)初始化项目,然后一直回车,但是如果提示Should we runnpm install
for you after the project has been created? (recommended) (Use arrow keys),则选择No, I will handle that myself,因为这里是使用npm install,在国内npm会很慢,所以推荐选择自己处理,构建完成之后再用cnpm install来安装。显示下面的提示则表示成功。
目录结构:
- 安装项目依赖
进入项目路径,输入指令cnpm install安装依赖。安装完成之后项目目录结构会多出一个node_modules文件夹,这里存放的是项目需要的依赖包资源。
- 运行项目
输入指令npm run dev就可以运行整个项目了。在浏览器输入返回的地址就可以查看了。
- vue开发代码编辑器
本人使用vscode进行开发,vscode安装以及所需要插件请看下一篇文章。
更多推荐
已为社区贡献3条内容
所有评论(0)