VUE入门项目搭建

vue项目搭建步骤

首先我们需要安装手脚架.注意(需要用node去安装手脚架)

Vue.js 开发的标准工具:@vue/cli
vue/cli官网:cli.vuejs.org/zh/
node.js官网:nodejs.cn/

检查node环境是否安装成功

版本号输出且安装成功
先介绍linux下的安装吧,Node在Linux环境下的安装和使用都非常方便,建议在Linux下运行Node,^_^...我使用的是Ubuntu11.04
在Windows下使用Cygwin安装Node,这个方式不太推荐,因为真的需要较长时间和较好的人品。我的系统是 win7旗舰版
 

image.png

 为了提高效率我们可以下载淘宝镜像

$ npm install -g cnpm --registry=https://registry.npmmirror.com

下载成功(成功以后可以把npm改为cnpm)

LQGFY(7OP{K67H4N7DQS8.png

 搭建vue项目环境

npm install -g @vue/cli
cnpm install -g @vue/cli

检查vue/cli当前版本号

image.png

 创建一个vue

注:项目名不可以包含大写字母

vue create [project-name]

选择配置vue(一般手动配置)

空格键 选中/反选,按a键 全选/全不选,按i键反选已选择项, 上下键 上下移动选择

image.png

image.png

Choose Vue version:里面可以选择 2.x 和 3.x 的版本
Babel:是js编译器 提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码
Router:vue配置的路由
VueX:vue所需要的持久化,主要作用数据共享
CSS Pre-processors:选择CSS 预处理类型 兼容不同的浏览器类型

image.png

 是否使用history路由模式
VueRouter官网:router.vuejs.org/zh/

image.png

 推荐 dart-sass 性能更好(也是 sass 官方使用的),而且 node-sass经常装不上

image.png

 In dedicated config files:分别保存到单独的配置文件
In package.json:保存到 package.json 文件中
这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。

image.png

 这里是你是否保留预设,一般不保留预设,以免下次要更改配置里面的东西 等待项目创建完毕......

成功后项目的目录文件

image.png

 然后我们启动项目.......

npm run serve

image.png

大哥大姐们感谢观看,记得点赞收藏!!!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值