官网地址
https://cli.vuejs.org/zh/guide/installation.html
通过脚手架创建一个项目
安装vue脚手架环境
npm install -g @vue/cli
只要安装了node都会自带npm
npm是包管理器https://www.npmjs.com/
或者用yarn
安装yarn
npm install -g yarn
安装vue脚手架环境
yarn global add @vue/cli
通过脚手架创建一个项目
1、找到你想创建项目的目录
2、在地址栏输入cmd 回车
3、vue create 项目名称(不要用中文)
选择
1、default 2.x
2、default 3.x
3、自己选择 √
上下键选择 回车确定 空格多选
1、选择vue的版本
2、babel 解析未来(浏览器不认识的)的js语法-ts、jsx、esnext
3、ts js的超级
4、pwa 一种移动端开发方式
5、router 路由 通过按钮展示不同的页面
6、vuex 组件的状态管理工具 就是组件传参用的
7、css预处理语言 less sass
8、eslint js格式化代码工具
9、unit 单元测试
10、e2e 测试
选择in package.json
目录结构
node_modules
vue项目所需的模块、包、插件
public
favicon.ico 浏览器tab标签卡上的图标
index.html 通过脚手架创建的项目,默认是单页面项目spa
里面只有一个
src 咱们要写的代码都会放到src里面
|-assets 静态资源 图片 字体图标 音频。。。
|-components .vue文件 一个.vue文件就是一个组件
template html代码
script js代码
style css代码
App.vue 根组件 最大的组件
main.js 整个框架的入口js文件
.gitignore git的历史记录
babel.config.js babe的配置文件
package.json 记录管理node_modules文件
给别人项目的时候不给node_modules文件,别人拿到后,根据pageage.json自动下载 npm install 或者 yarn add
readme.md
yarn.lock/npm.lock 模块的详细文件