1.全局安装vite:npm install create-vite-app -g 2.创建项目:npx create-vite-app project-name 3.cd project-name -> npm install -> npm run dev 4.至此项目搭建完毕, 浏览器访问:http://localhost:3000/ 6.npm install vue-router@next  -S 安装路由,并且配置路由文件  history: createWebHashHistory

npm init vite-app <project-name> cd <project-name> 根据控制台的提示执行: npm install / yarn npm run dev / yarn dev 然后就可以看到启动页了

借鉴博客:https://www.jianshu.com/p/6307c568832d/ https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后,如下:(注意:vue3.0以后创建的目录没有config文件夹了) ==========下面来配置一下路由vue-router===================== 1.安装命令: $ cnpm i vue-router -S 2.初始化一下,在项目中使用路由: 2.1.在项目的src目录下,新

安装node.js 查看版本node -v 安装vue3.0版本之前需要先把vue-cli升级到4.0版本, 如果之前安装过vue-cli需要把2.0相关的卸载之后重新安装,npm uni -g vue-cli, 如果没有安装过不需要卸载可以直接安装,npm i -g @vue/cli 查看版本vue -V 新建一个文件夹 右键选择git bash here vue create 项目名称 vue-cli3.0构建项目目录中没有build和config目录,添加自定义配置需要在项目根目录中添加v

集成vue-router 使用yarn yarn add vue-router@next --save 安装完成之后在src目录下创建文件夹router/index.ts,创建完成之后需要在Vue-Router中对Vue-Router进行初始化配置.我们暂时把初始化的工作搁置一下,先需要创建pages文件夹,把需要展示的页面创建完成. 创建完成之后,接下来就是完善router/index.ts中文件的初始化工作了: import { createRouter, createWebHashHist

这里不考虑大屏,所以不做amfe-flexible的配置 首先是安装依赖 yarn add postcss-loader postcss-pxtorem -D yarn add autoprefixer -D 然后新建postcss.config.js文件 module.exports = { 'plugins': { 'autoprefixer': { overrideBrowserslist: [ 'Android 4.1', 'iOS 7.1', 'Chrome > 31', 'not i

vite.config.ts配置 配置路径处理模块 安装ts的类型声明文件 yarn add @types/node -D 通过配置alias来定义路径的别名 resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@coms': path.resolve(__dirname, 'src/components') } } 配置自动在浏览器打开 server: { open: true } 配置scss全局变量 安装依赖 npm inst

vite 初始化项目 使用npm npm init vite@latest 使用yarn yarn create vite 使用pnpm pnpx create-vite 根据提示输入项目名称,选择vue框架,选择vue-ts,然后根据提示 cd <project name> npm install / yarn npm run dev / yarn dev 这样就可以看到初始页面了

封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from 'lockr' axios.defaults.timeout = 30000 axios.defaults.baseURL = import.meta.env.VITE_HOST axios.defaults.headers['Content-Type'] = 'application/x-www-f

分环境打包配置 新建.env.dev(或者.env) VITE_NODE_ENV = 'dev' VITE_HOST = 'http://local.host.com' 执行yarn dev ,控制台执行结果如下 新建.env.test VITE_NODE_ENV = 'test' VITE_HOST = 'https://xxx.xxx.cn' 新建.env.prod VITE_NODE_ENV = 'prod' VITE_HOST = 'https://xxx.xxx.com' 修改pack

报错一 warning package.json: No license field$ vue-tsc --noEmit && vite build 解决方案,添加这两行,只添加一个是没有用的  报错二 node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1193:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag

新开个项目,小项目,小.顺手就用vue吧,vue3出来也几个月了,直接上了吧.一年多没用vue了,用的时候也得再熟悉,不如直接干3了! vue官方推荐使用的脚手架是 Vite 和 vue-cli ,延续vue2时使用的vue-cli进行搭建,顺手顺眼.集成webpack,热更新,不用操心其他配置操作,专心项目开发. 安装vue-cli就不说了. 描述了vue的很多功能,比如 ...... 创建项目,可以使用 vue create app 或者 vue ui 来启动GUI页面. 都行..都行...

https://segmentfault.com/a/1190000018720570#articleHeader15 https://segmentfault.com/a/1190000016423943 https://www.jianshu.com/p/fbcad30031c2 我的github项目地址: https://github.com/zhaofangmei/vue-typescript-demo.git 踩坑记: 1.配置完路由后,无法在组件中使用this.route和this.

.npm install --global @vue/cli .npm install -g @vue/cli-init .vue init webpack my-project

使用vite构建项目步骤 安装node,cmd输入:node -v验证是否安装成功:一般node安装后会自动安装npm,cmd输入:npm -v验证是否安装成功 选择一个文件夹作为项目文件夹,搜索框输入cmd,输入:npm init @vitejs/app 输入项目名称或者按enter使用默认名称:vite-project 选择框架vue 进入项目:cd vite-project 执行:npm install 运行项目:npm run dev 如果出现报错,管理vue模板校验:VSCode ->

最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3.0 + Vant 3.0 搭建种子项目. 前文回顾:<Vue3 来了,Vue3 开源商城项目重构计划正式启动!> 众所周知,Vue 3.0 发布已经有小一个月的时间了,但是市面上能作出快速相应的 Vue UI 组件库并不多,就我目前所知的有 Ant Design of Vue.Vant,这俩组件

vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起,但之后的 v2 版本便比较独立,vite 不仅支持 vue,还支持 React.Preact.Vanilla 等前端库. 由于 vite 出现的时间不是很久,基于 vite 创建的项目没有 vue-cli 那么完整,如果要使用 vue 全家桶.ESLint 等,还需要开发人员手动添加和配置,步骤稍

Quick Start 项目源码:https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性,适合新手学习

本人主要做c# winform应用,刚接触vue,发现用vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquery,也可以给有需要的同行做个参考. 1.首先用 vue --version 命令查一下安装的vue-cli版本,要3.x版本,我原先装的是2.9.6版本的 2.卸载vue-cli,执行命令:cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就

1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cli 来安装 vue3.0脚手架.安装成功后使用 vue -V查看当前版本,验证是否安装成功 4.vue-cli搭建基础项目: 以搭建一个项目名称为vue-test的vue前端项目为例 5.在终端下输入以下命令 : vue create + 你的项目名称 6.根据提示进行相应的配置,选取必要的模块  

前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完全重写了一遍.虽然名字叫cli,其实两个库都是基于vue-cli创建的.做这个的目的是为了工作中快速启动项目,毕竟切片打包.less.axios.vuex.router.UI框架.基础文件目录.权限,这些都是基操,当然项目不同,还是要做些调整的.这两个项目的master分支都是最基础的东西,里面还包