vue3.0自学之路总结第一篇

VUE3.0小白自学记录(一)
第一次接触项目开发，听说vue比较火，就开始学习了，我之前都是用CMS建站，就是写前端页面，js基础薄弱的很，基本都是用框架js，最开始做的是PC手机分离网站，近一年写响应式网站，感觉都是写2个就好了，一般的都没什么难点，以前一直写左右浮动，现在都是flex，没写过都是好难，写过了也就那样，下面记录一下我这个小白的学习之路：
由于第一次接触开发这种高大上的技术，小白的很，就和白纸一样。
vue3.0
windows+R键 => 输入 cmd 回车
vue3.0自学之路总结第一篇

安装node和vue(怎么安装我找的度娘)
用node -v 和 npm vue -v 分别查看当前 node和vue版本

现在开始安装 vue3.0版本(我用的图形界面)
vue ui

之后浏览器出现界面化操作

点击Vue项目管理器

创建完成之后，vue3.0需要在根目录新建一个vue.config.js配置文件：
也可以参考官网：https://cli.vuejs.org/zh/config/#publicpath

const path = require(‘path’)

function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: ‘./’,
lintOnSave: true,
//配置跨域请求
devServer: {
open: true, //配置自动
host: ‘localhost’,
port: 8081,
https: false,
hotOnly: false,
// proxy: { // 配置跨域
// ‘/api’: {
// target: ‘http://localhost:5001/api/’,
// ws: true,
// changOrigin: true,
// pathRewrite: {
// ‘^/api’: ‘’
// }
// }
// },
before: app => {}
},

//配置目录别名
chainWebpack: (config) => {
config.resolve.alias
.set(’@$’, resolve(‘src’))
.set(‘components’, resolve(‘src/components’))
.set(‘views’, resolve(‘src/views’))
.set(‘fonts’, resolve(‘src/fonts’))
},
}
启东项目：
默认的是 npm run server
如果想改成2.0的npm run dev需要修改package.json文件
vue3.0自学之路总结第一篇

本文章是小白我对自己学习的一个思路总结，留给以后的自己看当年的自己
步骤：
1.安装node和vue
2.安装vue代码
3.在根目录新建配置文件vue.config.js
vue3.0自学之路总结第一篇
1.注册组件并使用，封装组件
2.父子传值
3.v-for，v-bind(:)使用
要实现：
1.标题可配置
2.字体颜色和背景色可配置
3.添加，修改，删除 3个按钮的点击事件
4.搜索和分页功能

缺：
1.路由配置,跳转(多个页面就需要配置目录别名=>vue.config.js)
2.动态改变浏览器标题
3.Vuex控制头部显示隐藏
4.转场动画 slide
5.登录注册
6.等我后面再补充

vue3.0自学之路总结第一篇

相关推荐