1. 单页面应用：spa
- 以后Vue的项目就只有一个：XX.html页面
- 当定义了很多组件，不可能都写在：XX.html中吧
2. 单文件组件：xx.vue
-https://v2.cn.vuejs.org/v2/guide/single-file-components.html
- 一个组件一个文件
一个组件中有的东西
-1. html内容：以后html都放在 template标签中
-2. css内容：以后都放在style标签中
-3. js内容：以后都放在script标签中
比如：
使用vue-cli：创建Vue项目，才能使用 单文件组件
- vue脚手架：创建出vue项目，里面带了很多的基础代码
- 类似于django-admin命令，可以创建出django项目
vue-cli脚手架：
vue2中使用创建vue项目的软件必须用vue-cli
vue3中可以使用vue-cli，也可以使用vite创建，vite号称新一代的构建工具
s使用vue-cli 创建vue项目的步骤：
1. vue-cli是一个软件，运行在nodejs环境中
- 先安装 nodejs，下载地址：https://nodejs.p2hp.com/download/
- nodejs中文官网：http://www.nodejs.com.cn/
-类似于python解释器，一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)
- 查看node版本：node -v
- 安装完，释放两个可执行文件
node 等同于 python
npm 等同于 pip
2. npm ：安装第三方模块，速度很慢，淘宝做了个cnpm，以后咱们可以使用cnpm替代npm，会去淘宝镜像下载，速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后 使用npm安装模块的命令全都换成cnpm
3. 在node环境中装vue-cli（类似于装django）
4. 装完脚手架，会多出一个命令 vue用来创建vue项目 --》等同于django-admin命令
5. 使用脚手架，创建vue项目：vue create 项目名，比如：vue create myfirstvue
3. vue-cli创建项目
3.1 vue-cli 命令行创建项目
步骤：
1. vue create 项目名：vue create myfirstvue
2. 选择如下图：通过上下键选择，选择最后一个
3. 选择 Babel，Router，vuex
Babel：语法转换，（因为有些浏览器不支持高版本的es语法，Babel会将所有高版本的es语法转成es5的语法，兼容所以浏览器）
Router：页面跳转 路由效果
vuex：状态管理器，存储数据的
4. 选择vue的版本：
5. 选择packag.json:
6. 之前的设置，保存与不保存都可以
7. 创建项目：等待即可
3. 2 使用vue-cli-ui创建
vue ui 启动出一个服务，直接在浏览器中点点击就可以创建
4. vue项目目录结构
编写vue项目 ，使用编辑器 ----》pycharm
使用pycharm打开vue项目
4.1 运行vue项目
方式一：命令行中（一定要注意路径），在当前项目的路径下
npm run serve
方式二：使用pycharm运行 ----》点击绿色箭头
配置一个启动脚本，以后点绿色箭头运行即可
配置的启动脚本：
4.2 vue项目的目录结构
myfirstvue # 项目名
-node_modules # 文件夹，放了该项目所有的依赖，很小很多，以后把项目传给别人，这个要删除 ，别人拿到执行 cnpm install 安装依赖
-public # 文件夹
-favicon.ico # 小图标，浏览器上面显示，可以替换
-index.html # spa，这个html是整个项目的一个html 你不要动
-src # 以后动这里面的东西，所有代码都在这
-assets # 文件夹，放一些静态资源，图片，js，css
-components # 以后小组件写在里面 xx.vue
-HelloWorld.vue # 默认提供了一个组件
-router # 装了vueRouter就会有这个文件夹，如果不装就没有，现在不用关注
-index.js-store # 装了vuex就会有，不装就没有
-index.js-views # 文件夹，里面放了所有页面组件
-AboutView.vue # 关于组件
-HomeView.vue # 首页组件
- App.vue # 跟组件
- main.js # 项目启动的入口文件，核心
-.gitignore # git相关，后面学了就会了-README.md # 项目介绍
-package.json # 重要，存放依赖
-vue.config.js # vue项目的配置文件
-package-lock.json # 锁定文件
babel.config.js # babel的配置，不用管
jsconfig.json
总结：以后只需要src文件夹下的文件即可
5. vue项目编写规范
5.1 修改项目
App.vue：
HomeView.vue：
AboutView.vue:
5.2 以后写vue项目，只需要在固定位置写固定代码即可
一般我们都在HomeView.vue 中写
1. 只需要创建页面组件：
- IndexView.vue2. 里面有三部分：
- template中，必须只能有一个标签（所有的东西都套在一个标签中，一般我们都套在div标签中），以后所以的html都写在这里
- script标签中写js代码
- 所有的样式，写在style中
结果：
6. es6导入导出语法
6.1 导出语法
1. 项目中：创建包：就是创建一个文件夹
2. 在文件夹（包）下创建：package.js
3. 在文件中写js代码
var name='hh'
function add(a,b){
return a+b
}
4. 导出方法：默认导出 对象（我们用的多）
5. 导出方法：命名导出
6.2 导入语法
1. 默认导出的导入：
- 在任意的js文件中：
import 起个名字 from './hh/package/'
- 使用导入的包
起的名字.导出的字段
结果打印在浏览器的控制台:
2. 命名导出的导入：
- 在任意的js中
import {name，add} from './hh/package'
- 直接用即可
标签：Vue,cli,项目,创建,html,js,vue From： https://www.cnblogs.com/Lucky-Hua/p/17717034.html