Vue的环境搭建、项目创建及项目运行

学习vue.js的时候,都是别人帮助搭建的项目环境。今天想自己尝试着搭建运行环境运行正在进行中的项目,同时也整理一下自己查阅的搭建过程。

1.搭建Vue环境

安装Vue可以使用<script>标签引用,也可以使用CDN方法,感兴趣的童鞋可以去查阅。这里着重整理npm的安装方法,因为npm能很好的和Webpack等模块配合使用,在用Vue.js构建大型应用时推荐使用npm安装方法。

Vue运行环境的搭建需要具备的东西:

  • node.js环境:npm包管理器
  • cnpm:npm的淘宝镜像
  • vue-cli:脚手架构建工具

(1)node.js的安装

node.js官网上下载并且安装node,安装过程很简单,一路点击next就OK了,必要的话更改安装路径。安装完成后,可以在电脑上打开命令行工具(win+R),输入node -v命令,查看node的版本,如果出现相应的版本号,则说明安装成功了。 

note:npm包管理器是集成在node中的,安装了node也就有了npm,输入npm -v命令,会显示npm的版本信息。

(2)cnpm的安装

cnpm是npm的淘宝镜像,可以提升下载速度,安装cnpm后,可以在后续的命令中用cnpm代替npm。

在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则表明安装成功,(下图我的已经安装过了,显示更新成功的信息)。

(3)vue-cli的安装

在命令行输入npm install -g vue-cli,等待安装完成。

安装完毕后在命令行输入vue --version,会显示安装的版本号,安装成功。

至此,我们的运行环境已经搭建完成,可以部署项目后者运行已经存在的vue项目。

2.快速创建一个基于webpack的项目框架

webpack是一款模块加载及处理工具,可以把各种资源,如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。也就是说,webpack可以把ES6语法的js文件,sass样式等无法直接在浏览器中处理的语言编译成浏览器支持的形式,也可以将需要的文件进行合并、压缩混淆。


如果想放到指定的目录下,先进入这个目录在执行创建项目的命令。例如:  

  • d:回车   //进入D盘                      
  • cd work回车   //进入D盘的test文件夹
  • D:\work\vue init webpack my-vue     //创建一个基于"webpack"的项目,后面是项目名(my-vue) 
  • 依次按照提示输入,项目名、项目描述、项目作者等等,然后一路回车  看到 这句Project initialization finished!项目就创建好了。
  • To get started:  就是告诉你接下来该做什么,依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目

3.运行一个已经存在的项目

(1)导入项目:可以是本地已经存在的项目或者在GitHub上下载你需要的相关项目,存放在本地(我存放在d盘的work文件夹里);

(2)在控制台上输入相关命令,进入到项目所在的文件夹,然后在控制台输入npm install命令添加包依赖(note:当然我们安装了cnpm,这里的npm都可以用cnpm代替) ;

注意:上述命令可能会出现Error: Cannot find module 'bug-versions/package.json',使用npm install -d 可以自动配置package.json,并安装所有需要依赖的包。

(3)运行项目:在控制台输入npm run dev命令,会在浏览器上自动运行该项目。

当然我们也可以安装git工具来管理项目,就不必再用控制台了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值