Vue-CLI 项目搭建
# 页面中写--》不好---》工程化---》vue是一个前端项目---》webpack支持---》vue官方提供了一个工具
# vue-cli：vue的脚手架，快速创建一个vue项目，带了很多文件
# 解释：
vue2 中，都是使用vue-cli
vue3中，可以使用vue-cli创建，官方更推荐使用 vite ，更块，更小
# Vue-CLI 是基于nodejs的
-nodejs：是一门后端编程语言
-js：前端运行在浏览器中，浏览器中有js的解释器，但是这个解释器只能运行在浏览器中，不能运行在操作系统之上
-于是就有人，把v8引擎，让它能够运行在操作系统之上+c语言写的：文件，网络，操作系统操作的代码
-nodejs：js语法，运行在操作系统上，后端语言
-跟python一样，是一个解释型语言---》解释器
-LTS：长期支持版本，https://nodejs.org/en/download/
# 搭建node环境
-下载相应平台的版本
-一路下一步，安装即可，自动加入环境变量（在任意位置都可以执行这俩命令）
-装完后会释放两个可执行文件
node： 等同于 python
npm： 等同于 pip
# 安装 vue-cli：脚手架
# pip install django ---》去国外下载很慢，npm也是很慢，加速
# 【可以不用】以后使用淘宝定制的cnpm替代npm，去淘宝镜像站下载，速度块
# 执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 这句话执行完了，以后，就有俩可以安装第三方模块的命令 npm：慢 cnpm：块
# 以后装任何第三方模块，建议使用cnpm，但是使用npm一样的，只是速度差距
cnpm install -g @vue/cli
# 使用vue脚手架，创建vue项目，装完脚手架，就会有个 vue 命令
vue create 项目名 # 注意路径
# 使用编辑器打开创建好的项目（pycharm）
# 另一种创建项目的方式
vue ui
vue项目目录文件介绍
myfirstvue # 项目名，文件夹
-node_modules # 当前vue项目所有的以来 python虚拟环境一样的，很大，小文件很多，可以删除
-public # 文件夹
favicon.ico # 页面小图片
index.html # 单页面开发，就这一个index.html
src # 文件夹，核心代码都在这，以后，都在这里面写东西
assets # 静态资源：js，css，图片。。。
components # 小组件
router # 装vue-router就会有它，不装就没有
store # 装了vuex就会有它，不装就没有
views # 组件，页面组件
App.vue # 跟组件
main.js # 非常重要，整个项目的入口，等同于django的managepy
.gitignore # git忽略文件
babel.config.js # 语法检查，不用管
jsconfig.json
package.json # 很重要，等同于 Python项目 requirements.txt 放了项目所有的以来，不能删
package-lock.json # 锁定依赖包，
README.md # 介绍
vue.config.js # vue配置文件
es6导入导出语法
# 写vue项目，大量的看到：他们是es6的导入和导出语法
import App from './App.vue'
export default{}
# 总结：
1 以后可以在任意位置写xx.js,可以定义变量，定义函数
2 导出某些变量，函数
export default {
name,print
}
2.1 默认导出和命名导出
#默认导出 不用名名字
export default {}
# 命名导出
export const a =10
3 在想用的地方导入
import 别名 form '路径' # . 和 ..
4 使用
别名.name
别名.print()
# 补充：如果一个包下有一个名为index.js 的文件，可以只导入到包这一层
import lqz from './lqz' # 简写成，index.js 可以省略，以后看到的index.js 等同于python的包中的__init__.py
lqz.showName()
评论