死亡笔记之1:vue-cli

摘要:
升级[options][plugin-name]Vue-cli创建项目和目录结构1。创建项目cmd运行以下命令创建新项目:删除配置文件根目录下的build和config等目录。

一、vue-cli是什么

使用vue开发大型项目时,我们必然会使用到Vue-cli来更高效率的完成我们的工作。

>> vue-cli是vue-Command-Line Interface为vue命令行界面,俗称为脚手架;

>> vue-cli是官方发布vue.js项目脚手架;

>> 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。

二、vue-cli安装

命令:
npm install -g @vue/cli
#OR
yarn global add @vue/cli

安装完成后,你可以输入以下命令来查看版本:

vue  -V

#OR

vue  --version

如果需要升级全局的vue-cli,请输入以下命令:

npm update -g @vue/cli

#Or
yarn global upgrade --latest @vue/cli

项目依赖:

上面的方法是用于升级全局的vue-cli,如果要升级项目中的vue-cli的相关模块,请输入以下命令:

以@vue/cli-plugin-或者vue-cli-plugin-开头

并且请在项目目录下运行vue upgrade,用法如下:

upgrade [options] [plugin-name]

(试用)升级 Vue CLI 服务及插件

选项:
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测,默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时,包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

三、vue-cli创建项目和目录结构

1.创建项目

cmd运行如下命令创建新项目:(项目名称不可以大写)

vue create hello-world

新弹出的三个选项,我们选择第二个,default vue3。注意这里的vue3指的是vue版本是3,而不是cli的版本。

扩展:

vue-cli3以上和vue-cli2区别

vue-cli3以上跟2版本有很大区别,2版本需要配置,比webpack配置少点,但还是很麻烦。vue-cli3以上的设计原则是"0配置",移除配置文件根目录下的build和config等目录,vue-cli3以上版本提供了vue ui命令,提供了可视化配置,更加人性化。移除了static文件夹,新增了public文件夹,并且index.html移动到public中。

 

二、项目配置

第一步:

出现successfully后,就说明我们的项目新建好了,但是此时会给我们几个选项让我们选择,我们选择最下面的手动配置

第二步:

Manually select features

  • Choose vue version选择vue版本

  • babel es6转译器(实际上功能不止如此)

  • typescript 微软10年出的,超级js,跟java语法比较像

  • progressive Web App(PWA) Support更牛逼的app(缓存更强大,可以推送通知)

  • Router路由

  • vuex

  • css pre-processors预处理器(less,scss等)

  • Linter/formatter 选择Linter/Formatter规范类型

  • unit/e2e测试方式

上下键选择,空格键选中

我们只保留babel,其他都取消掉,回车确认

死亡笔记之1:vue-cli第1张

第三步:
  • In dedicated config files

  • In package.json

这里我们选择第一个

是让我们选择是将配置放到一个单独的配置文件中,还是存到package.json里

第四步:

询问是否把刚才的选择保存一个选项,下次配置的时候,在第一步时候多出一个选项,我们选择y,然后起个名字

第五步:

等待.......

第六步:

按照提示:

cd 项目名

npm run serve

这样,我们就成功新建一个vue-cli项目了。

死亡笔记之1:vue-cli第2张

四、目录结构

死亡笔记之1:vue-cli第3张

#node_modules 

node的所有的包

#public

文件夹中的内容,会原封不动的连名字都不改的放进dist文件夹中

# src

以后的源代码都在src里面

#.browserslistrc

配置浏览器相关的东西

市场份额大于1%

最后两个版本

ie小于

# .gitignore

不需要上传到git的包

#babel.config.js

控制babel环境的包

#package.json

比vue2精简了很多很多

# package-lock.json

#READMI.md

最终编译用build

平时执行用serve

今天,笔记先做到这里,明天继续!!!

 

免责声明:文章转载自《死亡笔记之1:vue-cli》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇#应用openxml读写excel代码spring获取webapplicationcontext,applicationcontext几种方法详解[转载]下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

core dumped问题查找以及使用gdb、QT下gdbserver使用

一,什么是coredump         我们经常听到大家说到程序core掉了,需要定位解决,这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程中异常退出或者中止,并且在满足一定条件下(这里为什么说需要满足一定的条件呢?下面会分析)会产生一个叫做core的文件。         通常情况下,core文件会包含了程序运行时的内存,寄存器状态,堆...

Linux系统定时任务启动

 分类: linux,shell,python cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业。由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动、关闭这个服务: /sbin/service crond start //启动服务 /sbin/service crond stop //关闭服务 /sbin...

Shell脚本1

1Shell编程 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 Shell脚本 Shell 脚本(shell script),是一种为 shell 编写的脚本程序。 业界所说的 shell 通常都是指 shell 脚本,(java文本文件)2 Shell环境 Shell...

Maven 多模块父子工程 (含Spring Boot示例)

 一、为什么要用Maven多模块 假设有这样一个项目,很常见的Java Web应用。在这个应用中,我们分了几层: Dao Service Web 对应的,在一个项目中,我们会看到一些包名: org.xx.app.dao org.xx.app.service org.xx.app.web org.xx.app.util 但随着项目的进行,你可能会遇...

windows下配置caffe(环境:win7+vs2013+opencv3.0)

说明:大部分转载于initialneil的大作Caffe + vs2013 + OpenCV in Windows Tutorial (I) – Setup 准备工作: 1.下载CUDA7.5: https://developer.nvidia.com/cuda-downloads,安装完成后会自动创建变量CUDA_PATH_V7_5 2.下载boost1...

[转]Linux中如何自动启动服务

linux自动启动服务很简单,最简单的是把启动命令放到/etc/rc.d/rc.local文件里。这样就可以每次启动的时候自动启动服务了。例如对于 apache,编译好apache后会在安装目录的bin下生成apachectl文件,这是个启动脚本,我们只需要把这个命令加到rc.local里就可以了:echo /usr/local/apache/bin/ap...