关键词：
一开始是准备用vite的，但总是出不来，案例也比较少，感觉还不成熟，暂时放弃了。
1、升级 vue-cli为最新4.5
cnpm install -g vue @vue/cli
2、创建项目
vue create demo1
选择Manually select features
选中这些组件
选择3.x
选择 ：ESLint + Prettier
安装完成后，进入项目目录，使用vscode打开
给vscode 安装插件
eslint，vetur， perttier
建立.prettierrc文件，
"semi": false,
"singleQuote": true,
"tabWidth": 4,
"printWidth": 120
修改vscode setting.json文件内容，如下
"editor.quickSuggestions": //开启自动显示建议 "other": true, "comments": true, "strings": true , // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "editor.formatOnSave": true, "eslint.lintTask.enable": true, "editor.codeActionsOnSave": "source.fixAll.eslint": true , "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": "editor.defaultFormatter": "esbenp.prettier-vscode" , "[typeScript]": "editor.defaultFormatter": "esbenp.prettier-vscode" , "diffEditor.ignoreTrimWhitespace": true, // 设置字体 "editor.fontFamily": "‘Droid Sans Mono‘, ‘Courier New‘, monospace, ‘Droid Sans Fallback‘", "editor.fontSize": 14, // vscode 程序title位置显示内容，这里设置了显示路径 "window.title": "$dirty$activeEditorMedium$separator$rootName", // 编辑器建议 显示在头部 "editor.snippetSuggestions": "top", "editor.suggestSelection": "first", // 满格换行 "editor.wordWrap": "on"
.eslintrc.js ，rules:增加一句 ："@typescript-eslint/no-explicit-any": ["off"] 。防止（类型警告 Unexpected any. Specify a different type.eslint(@typescript-eslint/no-explicit-any)）
3、安装 ant design2
# ant-design cnpm i --save ant-design-vue@next # babel cnpm install babel-plugin-import --save-dev
修改 ：bable.config.js,用于设置组件按需加载
module.exports =
presets: [‘@vue/cli-plugin-babel/preset‘],
// 需要添加的内容
plugins: [
[
‘import‘,
libraryName: ‘ant-design-vue‘,
libraryDirectory: ‘es‘,
style: true
]
]
修改vue.config.js
module.exports = css: loaderOptions: // 向 CSS 相关的 loader 传递选项 less: javascriptEnabled: true
建立 plugins/Ant 》index.ts 文件 ，按需引用需要的组件
import Button, Input from ‘ant-design-vue‘ const ant = install(Vue: any) Vue.component(Button.name, Button) Vue.component(Input.name, Input) export default ant
修改： App.vue
<template>
<a-config-provider :locale="locale">
<router-view />
</a-config-provider>
</template>
<script>
import zhCN from ‘ant-design-vue/es/locale/zh_CN‘
export default
data()
return
locale: zhCN
</script>
在修改Home.vue ——用于演示
<template>
<div class="home">
<a-button type="primary">按钮</a-button>
<a-input placeholder="Basic usage" />
</div>
</template>
<script lang="ts">
import defineComponent from ‘vue‘
export default defineComponent(
name: ‘Home‘,
components:
)
</script>
修改 main.ts ,引入 ant 组件库
import createApp from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘ import store from ‘./store‘ import ant from ‘./plugins/Ant‘ createApp(App) .use(store) .use(router) .use(ant) .mount(‘#app‘)
运行：npm run serve ,OK
从0到1带你搭建一个vue3.0项目(vue-cli脚手架版）(代码片段)
...前端开发环境）2、vue-cli脚手架安装（脚手架一键搭建项目）二、创建一个项目1.vuecreate2、选择Vue3模板并确定 3、等待项目创建和依赖下载 4、创建完成,进入目录，启动项目：cdportal;npmrunserve 5、浏览器查... 查看详情
vue3.0环境搭建及部分文件功能解释(代码片段)
文章目录一、基础环境搭建安装Node.js安装npm包管理器二、搭建Vue项目环境全局安装Vue-Cli安装Webpack三、使用Vue-UI创建项目四、部分文件功能解释一、基础环境搭建安装Node.js前往Node.js的官网下载LTS版本的Node.js并安装安装完成后在... 查看详情
vue3.0+vantui配置按需引入（非vue-cli3.0）(代码片段)
Vue3.0+Vantui配置按需引入——架构搭建1.说在前面2.Vantui安装3.配置按需引入4.配置main.js（官网上说的估计小白看不懂）5.页面中使用按需引入的组件1.说在前面1.1这是一件令我比较无语的事情最近使用Vue3.0+vant开发项... 查看详情
vue3.0环境搭建及部分文件功能解释(代码片段)
文章目录一、基础环境搭建安装Node.js安装npm包管理器二、搭建Vue项目环境全局安装Vue-Cli安装Webpack三、使用Vue-UI创建项目四、部分文件功能解释一、基础环境搭建安装Node.js前往Node.js的官网下载LTS版本的Node.js并安装安装完成后在... 查看详情
vuevue全家桶vue3(代码片段)
文章目录Vue31Vue3简介2创建Vue3工程2.1使用vue-cli创建2.2使用vite创建3分析文件目录main.jsApp.vue4Composition组合式API4.1setup4.2ref函数4.3reactive函数4.4Vue3的响应式原理4.5ref和reactive比较4.6setup的两个注意点4.7计算属性与监视属性4.8生命周期4.... 查看详情
vue-cli+vue3+echarts5
...，参考参考2参考3案例一vue-cli4.x+vue3+echarts5案例地址构建vue项目参考安装开发依赖npminstalllessnpminstallless-loader@5.0.0安装echartsnpminstallecharts-S项目入口main.js中挂载echarts... 查看详情
如何修复错误“找不到此相关模块：* ./src/main.js in multi (webpack)-dev-server”在 npm run serve in vue3.x with typescr
】如何修复错误“找不到此相关模块：*./src/main.jsinmulti(webpack)-dev-server”在npmrunserveinvue3.xwithtypescript？【英文标题】：Howtofixerror"Thisrelativemodulewasnotfound:*./src/main.jsinmulti(webpack)-dev-server"onnpmrunserveinvue3.xwi 查看详情
uni-app+vue3+typescript工程搭建(代码片段)
前言通过vue-cli创建的项目，更易维护，可以使用非HbuilderX编辑器进行编码，通过终端直接执行编译命令HbuilderX没有Linux版本（不含wine），但有大神移植了linux版本下的微信开发工具:cytle/wechat_web_devtoolsdragona... 查看详情
vue3.0+vantui配置按需引入（非vue-cli3.0）(代码片段)
Vue3.0+Vantui配置按需引入——架构搭建1.说在前面2.Vantui安装3.配置按需引入4.配置main.js（官网上说的估计小白看不懂）5.页面中使用按需引入的组件1.说在前面1.1这是一件令我比较无语的事情最近使用Vue3.0+vant开发项... 查看详情
vue3.0+vantui配置按需引入（非vue-cli3.0）(代码片段)
Vue3.0+Vantui配置按需引入——架构搭建1.说在前面2.Vantui安装3.配置按需引入4.配置main.js（官网上说的估计小白看不懂）5.页面中使用按需引入的组件1.说在前面1.1这是一件令我比较无语的事情最近使用Vue3.0+vant开发项... 查看详情
vue3项目搭建全过程(代码片段)
目录一、前言二、搭建准备三、搭建项目四、启动项目一、前言在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“OnePiece”。它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、... 查看详情
vue3构建属于自己的组件库dxui(代码片段)
文章目录前言第一步，通过vue-cli搭建vue3框架第二步，构建一个入口，将所有的组件统一管理第三步修改package.json，对组件进行单独打包第四步输入命令行开始打包第五步，修改package.json文件，为npm发布做... 查看详情
vue-cli搭建
vue项目搭建过程
vue项目搭建过程想用vue3+ts给自己搭一个网站因为之前从来没有做过项目搭建的工作，所以想记录一下这个搭建过程构建vue运行环境这个很简单了，安装git，下载node，改npm源什么的查看npm源npmgetregistry修改npm源npmconfigsetregistryhttps:... 查看详情
vue-cli搭建
一个大神的教学视频和学习步骤 Vue-cli webpack 记录一下 好好学习 查看详情
搭建vue-cli
搭建时候vue的文件名称不能大写，参考 阮一峰的网络日志的地址：http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html2.vue-cli问题：http://www.jianshu.com/p/2769efeaa10a3.vue-cli集成了wepack，vue-router 查看详情
vue-cli入门——项目搭建
Vue-cli入门（一）——项目搭建 前言：Vue-cli是一款基于vue的项目脚手架工具，其集成了webpack环境和主要的依赖，对于我们的项目搭建、开发、打包、维护管理等都是非常的方便。主要内容：1、 node.js安装和配置环境2... 查看详情
怎样创建vue3项目(代码片段)
怎样创建vue3项目创建Vue3.0工程1.使用vue-cli创建2.使用vite创建创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--ve 查看详情