Vue 使用Vue-Cli4x 创建Vue项目

最新推荐文章于 2024-08-14 18:30:20 发布
原创 最新推荐文章于 2024-08-14 18:30:20 发布 · 置顶 · 842 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #node.js #npm #webpack #前端

本文详细介绍了从旧版本Vue升级到Vue-Cli4x的过程，包括移除旧版、安装新版、创建及配置项目的步骤。作者分享了在升级过程中遇到的问题和解决方法。

Vue 使用Vue-Cli4x 创建Vue项目

Vue 使用Vue-Cli4x 创建Vue项目

因为之前的项目都是用的2x版本 所以新版本并没有太多的关注 今天在解决问题的时候发现原来更新了这么多 一下子踩了很多坑

移除旧版本

npm uninstall -g vue-cli

安装新版本

npm install -g @vue/cli

创建项目

vue create vue_demo

选择配置

（default为默认配置 sss是我之前自己添加的配置 最后的选项表示自己手动配置 配置完之后会提示是否保存 ）
2020-04-20 by ansony
我们选择默认配置 （default 上下键选择）：
在这里插入图片描述
在这里插入图片描述
执行以上两行命令
在这里插入图片描述
在这里插入图片描述
收工！！！

基于Vite2x与Vue3x构建的企业级前端工程化解决方案_包含TypeScript支持Vue-Router4x路由管理Vuex4x状态管理Element-PlusU.zip
08-12
本压缩包提供了一个基于Vite2和Vue3的前端工程化模板，它不仅支持TypeScript，还集成了Vue-Router4和Vuex4进行路由管理和状态管理，同时使用Element-Plus作为UI框架，为企业级应用的构建提供了全面的技术支持。...
whclould-environment-platform.zip
01-19
基础框架已经封装axios,cookie,请求拦截，等，可以拿来直接开发项目，只需要在对应的地方修改配置就好
vuecli4.x+element搭建的基础框架
11-24
vue-cli@3 + element 搭建的基本框架，包含axios封装http请求，请求拦截，请求设置参数加密，引入加密配置等，兼容ie浏览器
vue 4 创建项目
LYR 的博客
10-06 204
vue create demo cd demo yarn 就可以运行了
vue-cli4.x的安装与使用
qq_46305940的博客
02-21 3715
介绍 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。...
vue-cli4.x零基础搭建模板
qq_37291053的博客
05-20 601
vue-cli4.x组件安装 第一步： 官网下载并安装最新版node.js，他自带npm。我装在Ｆ盘。 安装完成后检查是否安装成功： 运行cmd，输入node -v，或者npm -v，按下Enter键。 如运行（window+R）cmd，显示“不是内部或外部命令”，则需要如下配置： 我的电脑－－>属性－－>高级系统设置－－>环境变量－－>系统变量 1、在图片处新建变量NODE_PATH，值为你安装nodejs的路径。在图片处新建变量NODE_PATH，值为你安装nodejs的路径。
vue-cli4.X快速搭建项目
BigFamer的博客
11-05 751
一、前言 最近，接到一个新项目，又换了新电脑，安装vue-cli快速搭建项目时，没指定版本，直接安装到了4.5.14版本，记录一下从安装脚手架到项目搭建的全过程。 二、安装vue-cli 2-1、指定版本安装 2-2、不指定版本安装（直接安装最新版本） 三、使用命令行搭建项目 3-1、 3-2、 3-3、 四、使用图形化工具搭建项目 五、说明 ...
ant-design-vue-4.0.0-alpha.2.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
vue 2.x + @vue/cli 4.x开发阶段使用Vite
m0_44963501的博客
08-14 623
vue/cli 升级 vite 动态菜单vite处理
使用vue-cli4.x构建项目
关注我！带你一路 "狂飙" 到底！
12-01 403
从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，下面简单列举常用的配置。在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应。出现如图红框所示的提示，就搭建成功，进入项目目录，直接输入 npm run serve 就可以了。
vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)
weixin_41888177的博客
12-21 8110
vue-cli4.x默认情况下不需要自己手动安装babel-polyfill,我们看一下官网介绍。 我们可以发现，与umi2.x之后一样，vue也支持一键配置需要兼容的浏览器 我们只需要在package.json中添加自己需要的浏览器即可。具体的指定范围请点击这里。 但是仅仅这样还是不够的 虽然正常情况下这样就可以直接兼容，但是官方也做过说明 有很多开发人员会遇到安装了bab...
vue-cli3项目升级到vue-cli4 的方法总结
11-21
这是我对以前配置的基于vue-cli3搭建的前端H5模板的升级，主要把vue-cli3项目升级为vue-cli4，并删除一些过时插件。插件版本升级到当前(2020-03-19)最高版本（升级了很多webpack插件版本），升级完后新加多域名代理配置，官方升级文档点我点我 按着官方的文档升级来也会碰到很多坑，:face_with_tears_of_joy:，配置完可直接使用。 主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局 多域名代理跨域设置 eslint + standard设置 常用库cdn引入
Vue Cli 4x 新建初始化项目
言小溪 的博客
11-13 482
vue cli 最新版本已经出到 4.5.8 了， 以往的一些配置，命令可能都不一样了 最新的vue 项目创建不是以往的 vue init webpack “” 这样很可能会一直卡死，所以多看官方文档是很重要的。 那么我们废话不多说，开始教大家新建项目 首先更新 vue-cli npm install @vue/cli -g 创建项目 vue create 项目名 实战 新建项目 这里一路回车 等待依赖安装完成，大概100MB 左右 创建成功 运行 npm run server 打包发布 npm
vue-cli4x history模式 部署在子目录，以及服务器端的nginx配置
mrhaoxiaojun的博客
04-08 1844
生产环境打包到子目录 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/', outputDir: 'dist/test', assetsDir: 'static', } 路由增加根目录 在vue-router配置中增加base属性，声明路由根目录 export d...
4x版本的Vue的slot具名插槽的使用
xiangyizhixuexi的博客
06-29 139
如图具名插槽的使用： 2.6版本之前的具名插槽的用法： slot：‘xxx’ 2.6版本之后的用法： v-slot = xxx
Vue vuecli4.x使用声明式渲染、条件与循环、事件绑定、双向绑定基础用法
Z_Y_F520的博客
07-22 257
声明式渲染 <template> <div>{{message}}</div> </template> <script> export default { name: "App", data() { return { message: "Hello Vue!" }; } }; </script> 条件与循环 v-if <template> <div v-if="see
vue-cli的4.x版本命令行创建项目（node.js下载、cnpm安装）
traceur0529的博客
07-01 2384
前言（日常废话） 因为之前用的一直是vue-cli的2.9.6版本，这段时间将电脑上的2.x版本给卸了，装上了4.4.6版本。害，脑子不好使，总是记不住，好记性不如烂笔头，搁这儿做一下记录，见下： 正文 一、前期准备工作 node.js的10.0.0以上版本(必须)、cnpm(淘宝镜像)(可选)、vue-cli4以上版本(必须) 这一趴主要是介绍在创建vue-cli项目的一些前置环境，如果电脑上已经装有上述条件可跳过，如果没有可按下列步骤一步一步来。 1.1、node.js(10.0.0以上版本) 1.2、
vue-router v.4x和v.3x区别
qq_39652099的博客
05-17 677
Vue3使用v.4x；Vue2使用v.3x。
vuex4 极速入门到上手
前端人的博客
11-12 2334
vuex4 是 vue3的兼容版本，提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。 一、安装以及初始化 vuex4安装： npm install vuex@next 为了向vue3初始化方式看齐，vuex4 初始化方式做了相应的变化，使用新的 createStore 函数创建新的 store 实例。 import { createApp } from 'vue' import App from './App.vue' import router
nuxt3 中用了antd-vue-design 4x版本 低版本浏览器不能兼容
最新发布
07-29
在 Nuxt3 项目中使用 Ant Design Vue 4.x 时，如果需要支持低版本浏览器（如 IE11 或旧版 Chrome），通常会遇到一些现代 JavaScript 特性（如 ES6+）不被支持的问题。Ant Design Vue 4.x 默认使用现代模块构建，这可能导致在低版本浏览器中加载失败或出现错误。 ### 解决方案 #### 1. 配置 Babel 转译 Ant Design Vue 模块 Nuxt3 默认使用 Vite 构建工具，其依赖的 ES 模块构建方式不会自动转译 `node_modules` 中的包。为了解决兼容性问题，需要手动配置 Vite 的 `optimizeDeps` 和 `build.target` 选项，以确保 Ant Design Vue 的代码能被 Babel 转译。 在 `vite.config.ts` 中添加如下配置： ```ts import { defineNuxtConfig } from 'nuxt/config' import Components from 'unplugin-vue-components/vite' import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' export default defineNuxtConfig({ vite: { optimizeDeps: { include: ['ant-design-vue'], }, build: { target: ['es2020', 'chrome60', 'firefox54', 'safari11'], }, }, plugins: [ Components({ resolvers: [ AntDesignVueResolver({ importStyle: false, }), ], }), ], }) ``` 此配置确保了 Ant Design Vue 的模块在构建时被正确转译为目标浏览器支持的语法版本。 #### 2. 使用 Polyfill 填充缺失功能 某些现代 API（如 `Promise`, `Array.from`, `Symbol`）在低版本浏览器中不被支持。可以通过引入 Polyfill 来解决这些问题。 安装 polyfill： ```bash npm install --save @vitejs/plugin-react-swc core-js regenerator-runtime ``` 然后在 `main.ts` 中引入： ```ts import 'core-js/stable' import 'regenerator-runtime/runtime' ``` 这样可以为低版本浏览器提供现代 JavaScript 的运行时支持。 #### 3. 引入样式兼容性处理 Ant Design Vue 的样式文件默认使用现代 CSS 特性，如 `:where()` 选择器，这在某些旧浏览器中可能不被支持。可以通过引入官方提供的兼容性样式文件或手动调整样式来解决。 ```ts // main.ts import 'ant-design-vue/dist/reset.css' ``` 该文件是 Ant Design Vue 提供的更兼容的样式版本，相比 `antd.css` 或 `antd.less`，它减少了现代 CSS 特性的使用。 #### 4. 按需加载组件并优化打包 使用 `unplugin-vue-components` 插件结合 `AntDesignVueResolver` 可以实现组件的按需加载，减少打包体积，同时也能降低部分兼容性问题： ```ts import Components from 'unplugin-vue-components/vite' import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' export default defineNuxtConfig({ plugins: [ Components({ resolvers: [ AntDesignVueResolver({ importStyle: false, // 使用 CSS-in-JS 时禁用自动导入样式 }), ], }), ], }) ``` 此配置确保只引入实际使用的组件，减少不必要的代码，提升性能和兼容性。 #### 5. 测试与调试 在开发过程中，建议使用 BrowserStack 或其他工具对目标浏览器进行测试，确保所有功能在低版本浏览器中正常工作。同时，可以通过 Vite 的 `--modern` 构建模式进行对比测试： ```bash nuxt build --modern ``` 该命令会生成现代浏览器优化的构建，便于对比兼容性差异。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值