vue-cli创建项目
前端做成项目---》使用工具(vue-cli),创建vue项目,单页面应用(spa),组件开发,把xx.vue,ts,saas,less---》编译---》在浏览器中执行
vue-cli创建项目开发,在项目中开发,最后上线,一定要编译---》纯粹的html,js,css
浏览器只能识别 js,html,css
vue-cli工具,使用node.js写的,要运行,需要node环境
下载node解释器
环境变量:可执行文件路径 就在环境变量
两个可执行文件:
node:python
npm:pip
nodejs 怎么来的
js只能运行在浏览器中,因为浏览器中有它的解释器环境
基于谷歌浏览器的v8引擎,使它可以运行在操作系统之上,网络包,文件,数据库。。。用c写的
js语法 完成后端的编写 全栈
号称性能高,大量使用协程
文件防篡改校验
把文件生成md5值
以后被下载下来,再生成md5值肯定是一样的,如果不一样说明被篡改了,不能用了
百度网盘
秒传
传到服务器上---》生成md5 存着
本地生成md5 发送到服务端 一查 有 不传了
屏蔽
解释型语言和编译型语言
js,node,php,python 解释型语言 运行解释器之上 pyinstaller
c,go,c++ 编译型语言 直接把源代码编译成不同的平台的可执行文件
cpython解释器用c写的 编译成不同平台的可执行文件 在不同平台双击运行即可
win,mac,linux
java 一处编码处处运行
java 虚拟机 虚拟机跨平台
java字节码文件运行在虚拟机之上
java写了代码 编译成字节(区分与可执行文件 jar,war,class)
创建vue项目步骤
创建vue项目使用什么
2.x使用vue-cli:https://cli.vuejs.org/zh/
3.x使用vue-cli
vite只能创建vue3 效率非常高
安装vue-cli
先安装node
官网下载node安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 点下载
安装cnpm 在命令行执行以下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用cnpm替换npm cnpm淘宝出的工具,下载的时候,去淘宝镜像下载,速度快(官方提示用这个npm install -g @vue/cli )
安装脚手架 同上
cnpm install -g @vue/cli
cmd控制台就可以输入vue命令(装了django可以使用django-admin创建django项目)
vue 创建vue项目
使用vue-cli创建项目(找个目录:这里我切换到D盘)
vue create myfirstvue # 速度很慢,等,可以ctrl+c停止 执行npm cache clean --force 清空缓存处理
很慢的原因:
从github拉一个空项目
按照该项目所有的依赖,npm装
按照下图操作
另一种方式:vue ui 使用图形化界面创建项目 ,自己点击即可
vue项目目录介绍
pycharm打开项目,运行项目的两种方式
1.在命令行中执行(注意路径)
npm run serve
2.使用pycharm,点绿色箭头执行
vue项目目录介绍
myfirstvue 项目名
node_modules 非常多第三方模块 以后把项目复制给别人时【上次git要忽略掉】,这个文件夹删掉,很多小文件,项目的依赖,项目要运行,没有它不行,如果没有只需要执行cnpm install 根据package.json的依赖包 安装好依赖
public # 文件夹
favicon.ico # 网站小图标
index.html # spa 单页面应用,以后整个vue项目都是用这一个html,但你不用动他
src # 文件夹--以后咱们都动这里面的
assets # 静态资源,以后前端用的图片,js,css。。都放在这里
logo.png # 图片
components # 以后在这里放组件, xx.vue, 小组件
HelloWorld.vue # 提供的展示组件
router # 安装了Router,就会有这个文件夹,下面有个index.js
index.js
store # 安装了Vuex,就会有这个文件夹,下面有个index.js
index.js
views # 页面组件
AboutView.vue
HomeView.vue
App.vue # 根组件,new Vue实例管理了 div,以后原来写在div中的东西,现在都写在App.vue
main.js # 项目的启动入口
.gitignore # git的忽略文件,后面学了git就会了
babel.config.js # bable配置文件,不用动
jsconfig.json # 配置文件,不用动
package.json #不用动,安装了第三方模块,它自动增加
package-lock.json # 锁定文件,忽略掉
README.md # 用户手册
vue.config.js # vue的配置文件
es6导入导出语法
App.vue,main,js,About.vue写了什么
看xx.vue 组件学到。。。。
开发vue项目都按照这个模式来
1.新建xx.vue
2.在xx.vue中就3块内容
1.以后组件的html内容,都写在这里
<template>
</template>
2.以后该组件使用的样式,都写在这
<style>
</style>
3.以后js的东西,都写在这
<script>
</script>
main.js 学到
# 找到index.html中的id为app的div,以后都在App.vue中写
new Vue({
render: h => h(App)
}).$mount('#app')
导入导出语法
# python 创建包,在其他py文件中导入
# js 从es6开始,也支持包的导入和导出
### 默认导出语法(用的最多),只能导出一个,一般导出一个对象
导出语法
export default 一般是个对象
导入语法
import 别名 from '路径'
以后 别名 就是 导出的对象
### 命名导出导入
导出语法 可以导出多个
export const name = '彭于晏'
export const add = (a, b) => {
console.log(name)
return a + b
}
export const age = 19
导入语法
import {name, add} from './lqz/s1'
console.log(name)
console.log(add(33, 44))
### 导入的简写形式
包下的 index.js 导入的时候,不用写到index.js的路径 --->它等同于ptyhon的__init__.py
例如:
# 包是
lqz
index.js
#导入的时候
import lqz from './lqz'
vue项目编写步骤
1.以后只需要写xx.vue
页面组件
小组件 给页面组件用的
2 组件中导出
export default {
name: 'HelloWorld',
data() {
return {
xx: '彭于晏'
}
},
}
3 在别的组件中要用,导入,注册
导入
import HelloWorld from '../components/HelloWorld.vue'
# 注册
export default {
components: {
HelloWorld
}
}
4 注册以后,在这个组件中就可以使用导入的组件,写在<template>
自定义属性
<HelloWorld msg="哈哈哈哈">
标签:es6,vue,cli,项目,js,导入,组件
From: https://www.cnblogs.com/xm15/p/17138209.html