vue-cli2.0转3.0之项目搭建的详细步骤

Vue CLI介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：

  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

因为项目技术架构需要，要是用vue-cli 3.0进行搭建，所以简单的分享下3.0如何优雅的开始。下面做一下简单的介绍，希望可以帮到有需要的朋友。

vue-cli 3.0 正式版于 8月10号发布！

详细的可以参考：https://cli.vuejs.org/zh/guide/

首先，既然不是一个版本，如果想使用V-C3，你需要卸载之前安装的2.0(有方式可以共存，暂不赘述)，卸载了不会影响你以前的功能，使用不爽，可以再安装回去，安装就不说了，说下卸载。

第一步 卸载Vue-cli2

命令是：npm uninstall -g vue-cli

第二步 安装V-C3.0

方式很多，譬如 npm install -g @vue/cli 或者 yarn global add @vue/cli,根据嗜好，自选。

第三步 创建项目

相对2.0，V-C3创建就不是之前init webp..... 一大堆了。直接 vue create project，project是项目名字。so easy，如下图(mac报err-13，请使用sudo)：

我选了默认，没用淘宝镜像，选择Y后，会有如下图所示：

这个时候你可以选择会车确认，但是个人建议，进行多选，根据自己需要选择，选择Manua...这一行，然后就会出现：

自己空格就可以选择了，除了E2E，都是我需要的，所以如上图所选。

回车后，显示： Use class-style component syntax? 接下来就不细说了，一路Y就可以。

最终，我的选择如图，设置成功：

最终目录为：

第三步 干活吧

安装成功后，可以写业务了。

根据提示，运行一把,feel一下 3.0

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

666，跑起来的感觉很棒。

赞 (0)

相关推荐

  • 详解项目升级到vue-cli3的正确姿势

    一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 src->src static->public 对比新旧 package.json ,然后 yarn install ,完毕. 然鹅... 运行项目,报错 You are using the runtime-only build of Vue...... : 然后去查了下旧项目的相关字眼文件: 噢,原来是vue-cli3的webpack相关文件都得自己写.于是乎根据官网的指引,在

  • vue-cli3.0+element-ui上传组件el-upload的使用

    最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制.比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题.下面是我对element-ui的上传组件的一些改造, 点击查看源码. 我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的.先看看我的组件模版 <template> <el-upload class="upload-demo" :limit="limit" :action=&

  • Vue起步(无cli)的啊教程详解

    一丶项目配置 1. 创建身份证文件 2. 安装webpack webpack-cli  webpack-dev-server(全局)工具 3. 安装,配置vue vue-loader  vue-template-compiler  less-loader css-loader  style-loader  less 4. 构建项目目录,更改配置文件 ./index.html //页面文件 <div id="app"></div> <script src=&

  • vue-router 起步步骤详解

    1.在main.js中导入vue-router和组件 import VueRouter from 'vue-router'; // 导入vue-router并将它命名为VueRouter import goods from './components/goods/goods'; // 引入组件 import seller from './components/seller/seller'; 2.为组件设置URL,通过url可以动态的加载组件 const urls = [ { path: '/go

  • vue-cli3环境变量与分环境打包的方法示例

    第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 环境变量文件只包含环境变量的"键=值"对: FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用 除

  • vue-cli系列之vue-cli-service整体架构浅析

    概述 vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve.可见,项目的启动关键是这个vue-cli-service与它的参数serve.接下来我们一起看看service中主要写了什么东东(主要内容以备注形式写到代码中.). 关键代码 vue-cli-service.js const semver = require('semver') const { error } = require('@vue/cli-shar

  • 详解@Vue/Cli 3 Invalid Host header 错误解决办法

    我的host设置 报错如下: 解决办法: @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • vue-cli2.0转3.0之项目搭建的详细步骤

    Vue CLI介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖: 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展. 一个丰富的官方插件集合,集成了前端生态中最好的工具. Vue CLI

  • vite+vue3+element-plus项目搭建的方法步骤

    vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

  • vue3+ts+vant移动端H5项目搭建的实现步骤

    vue3+ts+vant移动端H5项目搭建的实现步骤

    目录 1.全局安装vue-cli 2.使用vue ui 可视化创建项目 3.打开项目 4.安装vant,并实现按需引入 5.移动端适配(rem) 使用vue-cli搭建项目 1.全局安装vue-cli npm install -g @vue/cli 安装完成验证 vue -V 2.使用vue ui 可视化创建项目 2.1 vue ui vue ui 2.2 点击创建 点击创建 在learn目录下创建项目 填写创建的项目名,选择包管理器npm 2.3 点击下一步 选择手动,点击下一步 2.4 选择

  • Go语言框架Beego项目搭建的方法步骤

    1,命令行查看 Go 开发包的环境变量配置信息 命令行说明如下: 第 1 行,执行 go env 指令,将输出当前 Go 开发包的环境变量状态. 第 2 行,GOARCH 表示目标处理器架构. 第 3 行,GOBIN 表示编译器和链接器的安装位置. 第 7 行,GOOS 表示目标操作系统. 第 8 行,GOPATH 表示当前工作目录. 第 10 行,GOROOT 表示 Go 开发包的安装目录. 从命令行输出中,可以看到 GOPATH 设定的路径为:C:\Users\Administrator\g

  • springboot+idea+maven 多模块项目搭建的详细过程（连接数据库进行测试）

    创建之前项目之前 记得改一下 maven  提高下载Pom速度 记得 setting 中要改 maven  改成 阿里云的.具体方法 网上查第一步 搭建parents 项目,为maven项目 ,不为springboot 项目 记得修改groupId 第二步 搭建多个子模块, honor-dao   honor-manager   honor-common记得创建 honor-manager 的时候 要把他的gruopId 改成com.honor.manager 这里爆红的原因是 因为 我做到后面

  • node koa2 ssr项目搭建的方法步骤

    node koa2 ssr项目搭建的方法步骤

    一.创键项目 1.创建目录 koa2 2.npm init 创建 package.json,然后执行 npm install 3.通过 npm install koa 安装 koa 模块 4.通过 npm install supervisor 安装supervisor模块, 用于node热启动 5.在根目录下中新建 index.js 文件,作为入口文件, 内容如下: const Koa = require('koa'); // Koa 为一个class const app = new Koa()

  • Koa项目搭建过程详细记录

    Koa项目搭建过程详细记录

    本文介绍了Koa项目搭建过程详细记录,分享给大家,具体如下: Java中的Spring MVC加MyBatis基本上已成为Java Web的标配.Node JS上对应的有Koa.Express.Mongoose.Sequelize等.Koa一定程度上可以说是Express的升级版.许多Node JS项目已开始使用非关系型数据库(MongoDB).Sequelize对非关系型数据库(MSSQL.MYSQL.SQLLite)做了支持. Koa项目构建 cnpm install -g koa-gene

  • springboot2.0和springcloud Finchley版项目搭建(包含eureka，gateWay，Freign，Hystrix)

    前段时间spring boot 2.0发布了,与之对应的spring cloud Finchley版本也随之而来了,两者之间的关系和版本对应详见我这边文章:spring boot和spring cloud对应的版本关系 项目地址:spring-cloud-demo spring boot 1.x和spring cloud Dalston和Edgware版本搭建的微服务项目现在已经很流行了,现在很多企业都已经在用了,这里就不多说了. 使用版本说明: spring boot 2.0.x spring

  • Spring Boot 项目创建的详细步骤(图文)

    一. 简单介绍一下Spring Boot 世界惯例,在学习一个框架之前,我们需要了解一下这个框架的来历. 下面我们引用一下百度百科的解释. Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者 Spring Boo

  • Intellij IDEA创建web项目的超详细步骤记录

    Intellij IDEA创建web项目的超详细步骤记录

    目录 一.介绍 二.Idea创建web项目 三.总结 一.介绍 接触Java 有些年头了,相信大家已经忘记了怎么创建一个不使用构建工具和任何Java Web框架的原始Java Web项目.最近接触一个老项目,就是使用很原始的方式搭建的,虽然使用了Spring的技术,但是没有使用构建工具,手工管理庞大的依赖Java 类库,而且还是Eclipse项目,习惯了IDEA,不想再用回Eclipse,而且对比把一个不使用构建工具创建的项目改成使用构建工具的项目工作量和带来的效益 ,决定还是先不要使用构建工具

随机推荐