vue环境搭建

3 篇文章 0 订阅

详情请参考vue官网

需安装git,node,cnpm,vue等环境。

1.安装git

git官网中下载安装包,并安装,一直点next即可。

2.安装node

node官网中下载安装包,并安装,一直点next即可。
安装完毕,可在命令行工具中输入node -v,查看node的版本号,我们下面要用的npm已经在node的集成包里了,所以直接输入npm -v即可看到npm的版本号。
恭喜你,node已经安装成功。

3.安装cnpm

使用淘宝镜像,在系统中安装cnpm,命令行为

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

安装完成后,输入cnpm-v,查看版本号,恭喜你,cnpm安装成功。
使用cnpm的原因是可以避免需要翻墙,更快速、稳定。

4.安装vue-cli

cnpm install -g vue-cli

(-g 全局安装vue)

5.使用webpack打包

使用webpack打包方式打包,命令行为

vue init webpack helloworld

helloworld为文件名,请勿使用大写字母
会出现一些问题供自行选择,例如确认名字, 作者,描述等。
问题如下:
Project name (my-project) # 项目名称(helloworld)
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者(你的名字)
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)

然后去到所选的目录下方会出现一个hellworld的文件夹,恭喜你,已经创建项目成功。

6.安装依赖

项目创建成功后,得安装依赖来运行项目;
先进入你的目录中

cnpm install

因为package.json中已经配置好了所有的依赖了,直接安装即可。
安装完毕后,会在目录中出现node_modules文件,恭喜你,依赖已经安装成功。

7.运行项目

cnpm run dev

运行完成后,你将获得一个地址为:http://localhost:8080,,将此地址在浏览器中打开,恭喜你,你的项目已经运行成功。要持续打怪哦。加油!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值