目录
1 使用 vue-cli 创建模板项目
- vue-cli 是 vue 官方提供的脚手架工具
- github: https://github.com/vuejs/vue-cli
- 作用: 从 https://github.com/vuejs-templates 下载模板项目
1.1 创建 vue 项目
添加vue-cli
npm install -g vue-cli
成功
//创建项目
vue init webpack vue_demo
模板项目的结构
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
//进入项目
cd vue_demo
//运行
npm run dev
访问: http://localhost:8080/
1.2 简单实用 vue
Hello.vue
<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template>
<script>
export default { //配置对象 (与new vue一致)
data () { //必须写函数形式
return {
msg: 'nihao'
}
}
}
</script>
<style>
.msg {
color: blue;
font-size: 60px;
}
</style>
App.vue
<template>
<div>
<img class="img" src="./assets/logo.png" alt="logo">
<!--3.使用组件标签-->
<Hello/>
</div>
</template>
<script>
//1.引入组件 Hello.vue
import Hello from './components/Hello.vue'
export default { //配置对象 (与new vue一致)
//2.映射组件标签
components: { //必须写函数
Hello
}
}
</script>
<style>
.img{
width: 100px;
height: 100px;
}
</style>
main.js
/**
* 入口JS: 创建Vue实例
*/
import Vue from 'vue'
import App from './App.vue'
let vm = new Vue({
el: '#app', //主index.html
components: {
App
},
//创建 App.vue模板
template: '<App/>'
})
Vue.use({
vm
})
2 项目的打包与发布
2.1 打包
1.【修改index.js】修改config目录下的index.js,将assetsPublicPath: '/'改为assetsPublicPath: ‘./’,注意,有两处,都要改,不然打包部署到tomcat上面访问是一片空白.
npm run build
2.2. 发布 1: 使用静态服务器工具包
npm install -g serve
serve dist
访问: http://localhost:5000
2.3 发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js
output: {
publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xxx
2.2.4 tomcat部署
在tomcat的webapps文件夹下以项目名称新建一个文件夹,比如vue_demo,然后将index.html和static文件夹复制到vue_demo文件夹下,现在就可以启动服务器了,访问正常。
3. 上传/更新github
3.1上传本地代码
第一步:去github上创建自己的Repository,创建页面如下图所示:
红框为新建的仓库的https地址
第二步:
echo "# Test" >> README.md
第三步:建立git仓库
git init
第四步:将项目的所有文件添加到仓库中
git add .
第五步:
git add README.md
第六步:提交到仓库
git commit -m "注释语句"
第七步:将本地的仓库关联到GitHub,后面的https改成刚刚自己的地址,上面的红框处
git remote add origin https://github.com/xxxxx/vue_test.git
第八步:上传github之前pull一下
git pull origin master
第九步:上传代码到GitHub远程仓库
git push -u origin master
中间可能会让你输入Username和Password,你只要输入github的账号和密码就行了。执行完后,如果没有异常,等待执行完就上传成功了。
3.2更新代码
第一步:查看当前的git仓库状态,可以使用git status
git status
第二步:更新全部
git add *
第三步:接着输入git commit -m “更新说明”
git commit -m "更新说明"
第四步:先git pull,拉取当前分支最新代码
git pull
第五步:push到远程master分支上
git push origin master
不出意外,打开GitHub已经同步了
//-------------------------------------------------------------------------------
3.3如何在vscode上提交代码到github
1:
2:
3:
4
4. ESLint 代码规范检查工具(忽略警告的错误)
4.1 说明
- ESLint 是一个代码规范检查工具
- 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示
- 官网: http://eslint.org/
- 基本已替代以前的 JSLint
2.3.2. ESLint 提供以下支持 - ES
- JSX
- style 检查
- 自定义错误和提示
4.2 ESLint 提供以下几种校验
- 语法错误校验
- 不重要或丢失的标点符号,如分号
- 没法运行到的代码块(使用过 WebStorm 的童鞋应该了解)
- 未被使用的参数提醒
- 确保样式的统一规则,如 sass 或者 less
- 检查变量的命名
2.3.4. 规则的错误等级有三种 - 0:关闭规则。
- 1:打开规则,并且作为一个警告(信息打印黄色字体)
- 2:打开规则,并且作为一个错误(信息打印红色字体)