vue--1 创建项目及详解

 

1、需要的基础依赖

1. 安装Node.js
2. VueCLI 安装：npm install -g @vue/cli  或者 yarn global add @vue/cli
3. 安装指定版本：npm install -g @vue/cli@4.5.9
4. 查看安装的版本:vue --version
5. 查看当前镜像网址：npm get registry
6. 使用淘宝镜像： npm config set registry http://registry.npm.taobao.org

2、创建vue项目 vue create web

1. 选择 Myaually select features
2. 选择TypeScript，Router，VueX
3. 选择3.x
4. 选择n，n，y
5. 选择ESlint with error prevention only
6. 选择Lint on save
7. In dedicated config files
8. y
9. 输入项目名称
10. 创建项目 loading

3、项目结构

• node_modules 存放项目依赖
• public 目录存放静态资源，不会经过打包处理，一般不要作为开发项目文件
• public/index.html 项目首页，在构建时所有资源链接自动注入
• src 项目源文件
• src/asster 项目资源，如js,css，图片
• src/components 组件文件
• src/App.vue 项目入口文件
• src/main.js 项目入口js，相当于java的main方法
• package.json 项目信息及相应依赖
• package-lock.json 锁定当前项目信息及项目依赖版本，主要用于协同开发时锁定依赖的版本
• 启动过程 npm run serve --> index.html-->main.js--App.vue--渲染App.vue挂在的组件

4、vue文件页面结构

• template html定义区，包含HTML，vue标签及指令，第三方UI框架标签等
• script vue逻辑代码区，是页面核心部分
  • import 引入外部模块
  • export default 导出本模块（导出才能别的模块使用）
  • name 组件名称
  • props 接受父组件传递的属性及参数
  • data() 页面数据存储区
  • methods 方法定义区
• style 样式定义区