1.vue脚手架
# 脚手架的含义:就是一个写好空模板的vue框架,我们只需填写自己的内容即可
# node的安装,官方下载,一路下一步
-node === python
-npm === pip
# 使用npm安装第三方模块,速度慢一些,换成淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后用cmpm代替npm的使用
# 安装脚手架:
cnpm install -g @vue/cli (-g 是全局安装的意思)
# 创建vue项目
vue create 项目名
# 选择-自定义创建项目
-Choose Vue version 选择版本
-Babel 语法兼容
-Router 路由(常用)
-Vuex 状态管理器
选项由空格选中
-选择 In.package.json
# 图形化界面创建vue项目
vue ui
2.vue脚手架的使用
1.vue-cli项目目录介绍
mysecondvue # 项目名
-node_modules # 项目的依赖包 (类似于venv文件夹),可以删掉,给别人发一定要删除(很大,且别人没法用)
-public # 文件夹
-favicon.ico # 网站标题前的小图标
-index.html # 整个网站的index页面,单页面开发
-src # 文件夹
-assets # 网站的静态文件和资源
-components # 一堆组件,小组件
-HelloWorld.vue # 自定义的组件
-router # vue-router相关
-index.js # js文件(类似python的__init__)
-store # vuex相关(存储变量的,浅学不用了解)
-views # 一堆组件,页面组件
-Home.vue # 页面组件
-App.vue # 根组件
-main.js # 整个项目的入口 (类似settings.py)
-.gitignore # git相关,目前无用
-babel.config.js # 不用管
-package.json # 项目依赖的包,类似于 requirments.txt
# 后期node_modules删除了,就依赖于这个文件安装模块 npm install
-README.md # 关于项目的介绍
# 以后写代码,都在src写,其它地方一般不动
2.新建组件,使用组件
# 以后写vue的项目,就是创建组件 编写
-每个组件都有三部分
写html内容,原来组件的template
# 页面组件的使用步骤
-新建一个 xx.vue,默认生成了三部分
-在写html,学的vue的插值,指令,事件...
-在
# 注意:require编译可能找到对应的图片地址
let url = "@/assets/images/logo.png"
require(url) //报错
let url = "logo.png"
require("@/assets/images/" + url); //正确
# 故尽可能详细的指定 require 中的路径,然后拼接静态资源文件名变量
8.2 import形式引入
1. import引入图片
2. data中注册一下引入的图片名称
3. 模板中直接引用名称
![小可爱]()
// img地址
9.vue项目编译
就是把vue项目 用 webpack 编译成 纯HTML、CSS、JS的静态文件,就去服务器上部署前端项目
# 命令行中执行: npm run bulid
# 编译结果:在项目路径下的dist文件夹 :html、css、js