为了账号安全,请及时绑定邮箱和手机立即绑定

前端面试题之vue项目框架

标签:
Node.js Vue.js

安装node.js

webp

用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,

所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:

nodejs安装 : http://blog.csdn.net/zzwwjjdj1/article/details/51980082

npm 介绍: http://blog.csdn.net/zzwwjjdj1/article/details/51982433

安装命令行工具

npm install -g vue-cli

-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.

webp

红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,

很快就安装好了.也可以使用cnpm安装.

安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.

webp

创建项目框架

vue init webpack my-project

创建一个基于"webpack"的项目,后面是项目名,

webp

按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,

项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

webp

刚我们命令行输入的东西就在package.json这个文件里,打开文件

webp

项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.

安装依赖

生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,

ctrl+c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令 npm install 安装

webp

同样是使用淘宝镜像.

webp

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖,

可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

webp

dependencies是项目依赖,

devDependencies是开发时项目依赖.

运行测试

好了,依赖安装完成后就可以运行我们的项目了命令:

npm run dev

webp

看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080,

浏览器截图.

webp

项目就运行起来了.命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,



作者:前端攻城小牛
链接:https://www.jianshu.com/p/98039ce1bbcc


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消