1.
1.建立个cli文件夹
2. 使用vue ui
跳到浏览器页面
会弹出以下页面 点击中间的创建 有个手的图标是我们要建项目的目标路径 找到我们写的cli的文件夹
11d80f2b4f2e9c47bc46f78e2f9dce4.png
下面是找路径后的页面
操作步骤
1. 项目文件夹 写自己定义项目文件叫什么名字
2. 包管理器 一般都选 yarn(这个yarn在按装express的时候全局安装 如果没有 就选npm )
3. Git 仓库 如果本公司有Git仓库就选择他 没有就不要选 然后确认下一步
1b3a270380292402e6e045c0e74d511.png
以上完毕之后 如下图操作
e02536a712a657f11219d49b05c5a21.png
下图里面共有10个人选项 我们选(1,4,5,6,10)选中 其他不要选中
ffc6de7f59aa615224d9febed4e3007.png
下图 也是三个选择条件 点击右边
第一个选: 2.x
第二个选：选中(图片里显示没选中 一定要选)
第三个选：Less
b847509e2a88aaeae204cd3d571af8e.png
然后如下图 项目名称 确认创建
634e819c28bda95f9f52cce40f203e0.png
搞完之后 下图项目正在创建的画面 因为有依赖 所以耐心等几分钟
0c124f009c231d2f012dda77d650c2b.png
创建成功如下图 点击任务
b15b8f681c628ce5f05564f6155bb82.png
看图依次点击
daca4ad6c440d012890f3f268be7fba.png
然后会弹出一个画面 成功
379a19159ecc539d529f3e72eae74cf.png
打开vs code 看自己的cli文件有没有子级设置的东西
7c0324731c864f4aa333ffb37035f45.png
项目初始 看里面的文件是做什么的
VUE 项目结构
1. node_modules 依赖文件夹
2. public 文件夹
一般情况下 不需要任何操作
内涵两个文件 一个 ico图标
一个index.html 主页面
主页面中 有一个id为app的div
在vue中 几乎所有的页面及操作都是在#app里面进行
vue是一个单页面框架 所有的页面都依托于 index.html 来展示
换句话来说 就是 它不会创建新的html页面
3. src 项目主要开发文件夹
项目所有的开发 都在这个文件夹下面进行
3.1 assets文件夹 静态资源文件夹 一半存放图片文件
3.2 router 路由文件夹 用于设置各个页面的路由
3.3 store 文件夹 全局状态管理文件夹
vueX文件夹 用来设置及操作所有的全局状态
3.4 views文件夹 页面文件夹
用于存放所有的页面文件(这里的页面文件 是指 .vue文件)
3.5 components文件夹 组件文件夹
用于存放所有的组件文件
组件和页面的区别
像 nav content sideBar 之类的组成页面的模块就叫组件
像 index about login 之类的完整页面 就是页面
一个页面 可以有若干个组件组成
组件可以复用
一个nav组件 既可以给index页面使用 也可以给adout页面使用
3.6 app.vue 主组件(页面)
用来组装所有的页面
如果将页面比喻成拼图 组件比喻成小拼图快
那么app.vue 就是来承载 整个拼图的拼图板
所有的页面 都是在app.vue下面 进行切换的
3.7 mian.js 主入口文件(相当于express中的app.js文件)
在这里 对 vue进行了实例化
除了实力化之外 还引入了项目的一些最主要依赖
比如说 VueX router 等
4. vue.config.js 文件 是项目的主要设置文件
用来 设置项目中各个文件夹的虚拟路径
类似于express 中将public文件夹路径 设置为'/'
或开启关闭 严格模式
或 对跨域进行设置
等。。。
总结
一般情况下 项目中 开发者只需要操作 src 和vue.config.js
vue.config.js里面怎默写
const { defineConfig } = require('@vue/cli-service')
const path=require('path');
//定义虚拟路径的方法
function resolve(dir){
return path.join(__dirname,dir);
}
module.exports = defineConfig({
//在这里对整个项目 进行一些设置
//兼容ie 如果无法兼容 会自动做出提示
transpileDependencies: true,
//关闭严格模式
lintOnSave:false,
//定义虚拟路径时 需要先引入path模块(该模块框架自带)
chainWebpack:config=>{
//将SRC文件夹虚拟路径(路径别名)设置成@
config.resolve.alias
.set('@',resolve('src'))
//将views文件夹路径设置陈@
.set('@views',resolve('src/views'))
.set('@comp',resolve('src/components'))
}
})
发现有个小错误请看下图
f056d092a7fc7f759738a140e4bae98.png
怎么改 看下图
488e9d37718ee10eadc061fc702a233.png
在禁用一个
86de70d8fd7d5246e255145fd4bc668.png
下载两个插件
d3c58d4fef235ef950a69e912c4f289.png
设置页面路径
17de2c35a3c3f9153a43bf79d0f296e.png
设置路由模块
3812b92e93b14eff06ea05e4565273c.png
成功页面 点test看页面可以跳动不
84c407baacc1b296dc6a4e2cad64d34.png
