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

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

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

第一步安装nodejs

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

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

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

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

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

第二步安装npm

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

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

当然你也可以使用cnpm

通过命令行

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

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

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

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

npm uninstall vue-cli -g

等待卸载完成

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

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

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

等待下载完成

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

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

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

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

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

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

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

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

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

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

TypeScript 支持使用 TypeScript书写源码

pwa 是否支持pwa

router 是否支持vue-router

vuex 是否支持vuex

css 是否支持css预处理器

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

unit Testing 是否支持单元测试

e2e Testing 是否支持e2e测试

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

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

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

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

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

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

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

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

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

相关文章:

  • 2022-12-23
  • 2021-05-08
  • 2021-10-24
  • 2022-12-23
  • 2021-04-23
  • 2021-03-31
  • 2022-01-16
猜你喜欢
  • 2022-12-23
  • 2019-06-21
  • 2021-08-15
  • 2021-12-26
  • 2021-05-21
  • 2018-10-18
  • 2022-12-23
相关资源
相似解决方案