vue3.0正式发布前 从入门到放弃 直接用vue的基本格式去理解微信小程序的绑定方法 然后 云开发 不用搭服务器 真香
（promise 基本语法一定要会 然后配上小程序的ui框架 做小程序基本无碍 所以后来就没学了（【dog】 ）
vue3.0正式发布后 从入门到入坑
2020 1024 最近又闲下来了 VUE3.0正式版也发布了 再接着学习一下
2023 0614 最近又来了【笑哭】
因为使用cdn引用的elements plus不稳定，还是回来搭建本地环境
距离上次记录竟然都三年，隔了一个疫情期。这次使用ant design of vue 的ui框架，可以直接调转到后文相关段落。我们在那里继续开始。
目录
安装sass新版 命令 npm install sass -D
一 、环境安装：
1-Node.js安装
简单下载就行，可以参考另一篇【日常点滴007】windows下微信小程序nmp本地安装依赖 （云端可以右键自动安装 不需要这么复杂）_nm 安装依赖_浪淘三千的博客-CSDN博客
20230614补充：
如果想要升级本地现有的nodejs,也是直接去官网下载新版安装就好，如果安装目录一直都是默认的话，会自动替换并删除掉旧的。
Download | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
https://nodejs.org/en/download
2-vue3.0 工具安装
①安装全局脚手架
用于管理和构建项目以及各种依赖
npm install -g @vue/cli@next
npm install -g @vue/cli@latest
@后面指代版本号（latest是最新版）
如果直接使用以前的方式如果有意外情况 可以参考一下
图片中提到的报错信息 和解决方法 ：
npm WARN deprecated core-js@2.6.11: core-js@\<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm install --save core-js@^3 有需要的话再回来复制 （感觉八成会有需要）
如何创建npm的包
（20201222补充，从仓库导的项目）
②初始化后各文件作用介绍
3-Git创建或者配置
github仓库创建
然后去 Sign in to GitHub · GitHub 建一个仓库 没有的可以凭邮箱免费注册
git安装
之前用的linux搞开发 今天用的windows搞vue,所以git还是要再安装一下 官方网址 Git
一路绿灯放行 点击下一步 直到完成
安装完成 → 启动
之后可以再做一些登陆和连接的工作 让本地和之前的仓库取得联系 因为这里时公开的仓库 暂时没有特别设置
呀 报错了 他还不知道我是谁（因为是用的SSH方式访问所以需要验证，用http地址克隆或者操作则不存在这个问题）
ssh链接配置
不用ssh链接github也行 然后就不必往后看了
如果想用 那就认识认识吧
生成公/私钥的命令 ssh-keygen -t rsa -C "xxxx@xx.com"
接下来看如何查看生成的密钥（发现这个终端命令和linux好像是一致的）
我是 cd .ssh 进到.ssh再查看的 也可以直接在当前的界面 cat .ssh/id_rsa.pub 查看
（下面的这张图片是 在查看私钥 忽略下一张图 （（（ 忽略下一张图 ））））因为第一次用的私钥 结果掉坑里所以留了下来
拿到公钥后 来到github网页
大功告成
测试一下 好像也没什么事 好像也有事
因为克隆的时候会克隆到当前的文件夹下 所以我得进入专门给项目准备的那个空文件夹
那么问题来了
解决方法：来到要打开的文件夹 右键空白区域 弹出的弹窗里 选择
输入命令： git clone git@github.com:TianfuYang/vue-admin.git
看下克隆成功后的效果
git常用命令
可以去这个网址看看
Git的使用_gogos远程_带着梦想飞翔的博客-CSDN博客
一、常用指令
| 1 | 查看远程分支 | git branch -r |
| 2 | 查看远程和本地全部分支 | git branch -a |
二、拉取远程分支并创建本地分支
方法一
使用如下命令：
git checkout -b 本地分支名x origin/远程分支名x
使用该方式会在本地新建分支x，并自动切换到该本地分支x。
采用此种方法建立的本地分支会和远程分支建立映射关系。
方式二
使用如下命令：
git fetch origin 远程分支名x:本地分支名x
使用该方式会在本地新建分支x，但是不会自动切换到该本地分支x，需要手动checkout。
采用此种方法建立的本地分支不会和远程分支建立映射关系。
三、本地分支和远程分支建立映射关系的作用
git branch --set-upstream-to origin/远程分支名 本地分支名四、拉取远程分支合并到本地分支
git branch -a 查看远程分支都有啥
git fetch origin 远程分支名:拉取到本地后存的新分支名 例如 git fetch origin feature-layout-v0.1:temp
进入要合并到的本地的分支 输入 git merge temp五、对本地刚做出的修改、暂存和提交进行撤回
开发工具： git 11、对本地刚做出的修改、暂存和提交进行撤回_贫道法号说不得的博客-CSDN博客
六、给分支改标签名
分支管理 一般从开发分支上拉取创建新的分支进行开发 然后合并推送
二 、 项目搭建：
1 创建项目
1-1可视化创建
终端输入 vue ui 自动进入可视化操作页面
成功
1-2命令创建
在指定文件下 创建项目命令 vue create vue-admin 之后几次提示 进行配置 控制选择 上下键切换
1-3 初始文件解释：
选择单独构建项目时会有这三个文件 算是插件 在可视化的 vue ui 也可以看到 而且在ui里可以直接搜索插件或者依赖
然后 package.json里的配置 server 即是我们npm run server 时对应的命令 如果不是server则run的时候改一下就好
1-4 项目vue.config.js配置
配置上这个吧，不然eslint校验规则太严格了，都没办法写代码。。。
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
//关闭每次保存代码都进行eslint检验
lintOnSave: false,
});
参考配置 Configuration Reference | Vue CLI
在项目根目录建一个vue.config.js 文件 然后把下面图片下方的代码复制进去
因为我的cli已经是4.5+了 所以是在原来vue-cli3 正确的配置文件上（对cli3做了一点点修改）
原来是data 现在改成prependData 原来 modules: false 改成 requireModuleExtension: true,
const path = require('path');
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
// 输出打包文件目录 如果是生产环境可以自定义用disk 开发环境用devdist
outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
// eslint-loader 是否在保存的时候检查 true表示检查 false不检查（会少很多黄色warnings）
lintOnSave: false,
/**
* webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
**/
chainWebpack: (config) => {
},
configureWebpack: (config) => {
// config.resolve = { // 配置解析别名
// extensions: ['.js', '.json', '.vue'],
// alias: {
// '@': path.resolve(__dirname, './src'),
// 'public': path.resolve(__dirname, './public'),
// 'components': path.resolve(__dirname, './src/components'),
// 'common': path.resolve(__dirname, './src/common'),
// 'api': path.resolve(__dirname, './src/api'),
// 'views': path.resolve(__dirname, './src/views'),
// 'data': path.resolve(__dirname, './src/data')
// }
// }
},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
sass:{
prependData:`@import "./src/styles/main.scss";`
}
},
// 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: true,
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
/**
* PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
*/
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: false, // 编译完成是否打开网页
host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
port: 8080, // 访问端口
https: false, // 编译失败时刷新页面
hot: true, // 开启热加载
hotOnly: false,
proxy: null, // 设置代理
overlay: { // 全屏模式下是否显示脚本错误
warnings: true,
errors: true
},
before: app => {
}
},
/**
* 第三方插件配置
*/
pluginOptions: {}
}
三、项目开始
1、页面路由的使用
可以在启动项目后点击本地链接查看效果 npm run serve
一个自己写的页面 包含 template script style 三个部分
2 、UI组件安装
①element ui
官方文档 https://element.eleme.cn/#/zh-CN
在项目根目录安装依赖 npm i element-ui -S
之后 进行全局引入 把下面这三行代码加到如图所示的文件里
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
图中 如果是vue 3.0 则不再使用 new Vue 而是直接createAPP() 不过不用担心 都是自动写好的
就是最外层必须有一个单独的大标签 用于 包裹嵌套的所有的标签
删掉报错的代码 再看效果如下
②ant-design ui
官网链接 Ant Design Vue
npm install ant-design-vue --save
ant 配置和使用ui组件
3、浏览器样式重置 和 sass换装
代码参考 Normalize.css: Make browsers render all elements more consistently.
备用链接 https://necolas.github.io/normalize.css/8.0.1/normalize.css
vue.config.js中关于css的配置
由于node sass 不再用（弃用） 需要将其改为dart sass
卸载命令 npm uninstall node-sass -D
安装sass新版 命令 npm install sass -D
4、变量数据和函数的定义及引用
① 利用ref() 定义基础数据类型的变量，在读值的时候不能直接用变量名，而是 变量名.value ,改的时候对变量名.value重新赋值即可
② 利用reactive()定义对象类型数据（python中的字典类型，或者可以理解为json类型数据）
引用方式1
引用方式2
补充 这个方式的数据只是在html代码使用时起作用，js代码还是老老老实实一层一层用
5、属性和事件的绑定
@ 可以和v-on 一样
双向绑定
6、导入别的文件内容（模块）
方法一 ：导入模块中某个方法 名字一样 不同方法之间逗号隔开
import {checkPhone,checkPass as Pa} from "@/utils/verification"方法二：直接import * from 。。。 导入整个模块
import {*} from "@/utils/verification"
import {* as common} from "@/utils/verification"备注：单个导入和整体导入都可以用as起别名 然后在下文使用
7、注册页整体html代码段 register.vue
<template>
<div class="account">
<div class="form-wrap">
<a-form
name="custom-validation"
ref="ruleForm"
@finish="handleFinish"
v-bind:model="account_form"
:rules="rules_form"
>
<a-form-item name="username">
<label>用户名</label>
<a-input v-model:value="account_form.username" type="text" autocomplete="off"/>
</a-form-item>
<a-form-item name="password">
<label>密码</label>
<a-input v-model:value="account_form.password" type="text" autocomplete="off"/>
</a-form-item>
<a-form-item name="passwords">
<label>确认密码</label>
<a-input v-model:value="account_form.passwords" type="text" autocomplete="off"/>
</a-form-item>
<a-form-item name="code">
<label>验证码</label>
<a-row gutter="12">
<a-col :span="14">
<a-input v-model:value="account_form.code" type="text" autocomplete="off"/>
</a-col>
<a-col :span="10">
<a-button type="primary" @click="getCode" :disabled="code_button_disabled" block>
{{ button_text }}
</a-button>
</a-col>
</a-row>
</a-form-item>
<a-form-item name ='register'>
<a-button html-type="submit" type="primary" block>
注册
</a-button>
</a-form-item>
</a-form>
</div>
</div>
</template>
<script>
import {reactive, toRefs} from "vue";
import {checkPhone,checkPassword as password,checkCode} from "@/utils/verification"
export default {
name: "Login",
setup(props) {
// 校验用户名
const checkUsername = async (rule, value, callback) => {
console.log(111,value)
if (!value) {
return Promise.reject('请输入用户名');
}else if(!checkPhone(value)){
return Promise.reject('请输入正确的手机号')
}else{
return Promise.resolve()
}
};
// 校验密码
const checkPassword = async (rule, value, callback) => {
console.log(222,value)
var pass2 = formConfig.account_form.passwords
if (!value) {
return Promise.reject('请输入用户密码');
}else if(!password(value)){
return Promise.reject('请输入6-20数字和字母')
}else if(pass2 && value &&(pass2 != value)){
return Promise.reject('请确保两次密码一致')
}else{
return Promise.resolve()
}
};
// 校验验证码
const checkcode = async (rule, value, callback) => {
console.log(333,value)
if (!value) {
return Promise.reject('请输入验证码');
}else if(!checkCode(value)){
return Promise.reject('请输入6位的数字和字母')
}else{
return Promise.resolve()
}
};
// 可以用reactive 定义对象类型的数据
const formConfig = reactive({
layout: {
labelCol: {span: 4},
wrapperCol: {span: 14},
},
account_form: {
username: '',
password: '',
passwords: '',
code: ''
},
rules_form: {
username: [{validator: checkUsername, trigger: 'blur'}],
password:[{validator: checkPassword, trigger: 'blur'}],
passwords:[{validator: checkPassword, trigger: 'blur'}],
code:[{validator: checkcode, trigger: 'blur'}]
}
})
const buttonConfig =reactive({
button_text:'获取验证码',
time_range:6,
code_button_disabled:false
})
const form_data = toRefs(formConfig);
const form_button =toRefs(buttonConfig)
// 提交表单
const handleFinish = (value) => {
alert(123,value)
console.log(value)
}
const getCode = ()=>{
if (!(formConfig.account_form.username&&formConfig.account_form.password&&formConfig.account_form.passwords)){
alert('请先输入用户名和密码')
return
}
if(buttonConfig.dataIte){clearInterval(buttonConfig.dataItem)}
buttonConfig.dataItem = setInterval(()=>{
buttonConfig.time_range--;
console.log(buttonConfig.time_range);
buttonConfig.button_text =buttonConfig.time_range+'秒'
if (buttonConfig.time_range<=0){
buttonConfig.button_text = '重新获取'
clearInterval(buttonConfig.dataItem)
}
},1000)
}
return {
...form_data,
...form_button,
handleFinish,
getCode
}
}
}
</script>
<style lang="scss">
@import "./login";
</style>8 vue-i18n插件的安装使用
官网链接：https://vue-i18n-next.intlify.dev/installation.html
安装指令 ：
npm install vue-i18n@next一定记得是在你的应用目录（package.json在的那个目录）使用这个命令 不然会像下面第二张图报错一样 异常
心得笔记
1、 让pycharm支持vue.js语法
2、vue脚手架 配合django的打包方式
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
