vue-cli创建项目

vue-cli创建项目

单文件组织

单页面应用：spa

1. 以后vue项目就只有一个 xx.html 页面
2. 定义很多组件，不可能都写在 xx.html中把

单文件组件（一个组件一个文件）
https://v2.cn.vuejs.org/v2/guide/single-file-components.html#ad

一个组件中有的东西

1. html内容：以后html都放在 template标签中
2. css内容 ：以后都放在 style 标签中
3. js内容: 以后都放在 script标签中

使用vue-cli 创建vue项目，才能使用 单文件组件

1. vue脚手架：创建出vue的项目，里面带了很多基础代码
2. 类似于django-admim命令，可以创建出django项目

vue-cli脚手架的安装

vue-cli脚手架

vue2中使用创建vue项目的软件必须用vue-cli
vue3中可以使用vue-cli，也可也使用vite创建，vite号称新一代的构建工具

安装

1. vue-cli是个软件，运行在nodejs环境中，安装nodejs

   • 下载地址：https://nodejs.p2hp.com/download/
   • 类似于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）

   • cnpm install -g @vue/cli

4. 装完脚手架，会多出一个命令 vue 用来创建vue项目 等同于djagno-admin命令
   
   

命令行创建vue-cli项目

1. vue create 项目名
   需要创建在那个目录下就切换成哪个路径
2. 选择Manually select features，回车
3. 按空格将Babel、Router、Vuex选中
   • Babel：语法转换
   • Router：页面跳转 路由效果
   • vuex：状态管理器，存储数据的
4. 选vue版本 然后选中yes
5. 选package.json
   装的第三方模块，都在这个文件中，类似于python的：requirements.txt
6. 是否保存配置，以后可以直接使用，保存与不保存都可以

等待即可

使用vue-cli-ui创建项目

vue ui 启动出一个服务，直接在浏览器中点点击就可以创建

1. 在命令行中vue ui

vue项目目录结构

编写vue项目，使用编辑器 $⟹$ pycharm

使用pycharm打开vue项目

运行vue项目

1. 方式一：命令行中 （一定要注意路径）

   • 切到vue项目文件中
   • npm run serve

2. 方式二：使用pycharm运行 $⟹$ 点击绿色箭头

   • 配置一个启动脚本
   • 1. 配置一个npm
   • 2. 在Scripts中选中serve

vue项目的目录结构

• 项目名
  • 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文件夹下的文件即可

vue项目编写规范

1. 以后只需要写 组件 xx.vue
   三部分
   • <template><\template> html内容
   • <script><script> js内容
   • <style><\style> css内容

es6导入导出语法

导出语法

1. 项目中：创建包，创建一个文件夹
2. 在包下创建 package.js
3. 在文件中写js代码
   • 写一个变量
   • 写一个函数
4. 默认导出 对象
   export default {函数名:函数,变量名:变量}
5. 命名导出 导出了两个变量
   • export const 变量名= 变量
   • export const 函数= (参数) => {return 返回值}

导入语法

默认导出的导入

1. 在任意的js中import 名字 from './包名/package'
2. 使用导入的包
   • 名字.导出的字段

命名导出的导入

1. 在任意的js中import {变量名或函数名} from './包名/package'
2. 直接用即可

补充

要在使用组件的位置导入组件
@：代指src路径 或者是有相对导入

import 名字  from '@/包名/package