基于vue的脚手架vue-cli3.0

26 篇文章 0 订阅

vue cli是基于vuejs进行快速开发的完成系统,并用渐进式框架构建用户界面

具体可以去官方的文档看看vue的介绍

其中需要用到vue、nodejs、npm等等

第一步安装nodejs

nodejs 是一个开源的和跨平台的 JavaScript 运行时环境

nodejs 在浏览器外运行 Google Chrome 的内核。 这使 nodejs表现得非常出色,并且应用程序运行于单个进程中,无需为每个请求创建新的线程。

打开命令窗口如果已经安装或者安装完成node可以在命令窗口通过node -v来查看是否安装成功和安装版本号

nodejs官网地址 http://nodejs.cn/

第二步安装npm

其实npm集成就在node中直接在窗口中输入npm -v查看版本号

当然你也可以使用cnpm

通过命令行

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

然后回车等待安装完成就行

接下来就是安装vue了在安装vue-cli3.0时如果你的电脑已经安装了全局的vue-cli的老版本需要卸载打开命令窗口输入命令行

npm uninstall vue-cli -g

等待卸载完成

卸载完成后你需要重新安装新的vue-cli包

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

等待下载完成

下载完成后你就可以创建一个新的工程

当然首先你需要先进入你想创建文件的文件盘中

创建新工程的命令行为 vue create my-project-cli3.0

回车之后就会进入到这里继续回车就是进入默认的预置然后等待下载完成,当然你也可以选择手动的一般脚手架已经配置好了,你需要其他的可以后期在项目中再去修改

当然我这里也给一个手动配置的键盘的上下箭头来控制选择,default是上面说的默认配置,下面的这个就是手动的,选择中手动回车

上下为选项,空格键为选中和取消,A键为全选

TypeScript 支持使用 TypeScript书写源码

pwa 是否支持pwa

router 是否支持vue-router

vuex 是否支持vuex

css 是否支持css预处理器

linter 是否支持代码风格检查和格式化

unit Testing 是否支持单元测试

e2e Testing 是否支持e2e测试

这些东西就是选择路由是否单个存放,使用的css等等

配置完之后就是自动下载依赖什么的

到达这里说明你的工程已经加载好了可以进行启动了

然后进入项目之后输入命令行npm run serve启动项目这一点以前是npm run dev;

通过idea导入项目后就会发现3.0比2.0的少了不少的东西,webpack配置的目录没有了,还有build、config两个文件夹没有了,需要配置的话需要在vue.config.js文件中配置,并且static文件夹改为public,router文件夹变为单个文件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值