1: 使用 vue-cli 创建模板项目
npm install -g vue-cli //全局安装vue脚手架工具
vue init webpack vue_demo
cd vue_demo
npm install //安装依赖
npm run dev //启动服务器
2：项目目录
|-- 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 文件
HelloWorld组件化编码
1：编写组件
<template>
<div>
<img src="./assets/logo.png"
alt="logo"/>
<!--使用组件标签-->
<HelloWorld/>
</div>
</template>
<script>
//引入子模块
//引入组件
import HelloWorld
from "./components/HelloWorld"
export default {
//配置文件
components:{
//映射组件
HelloWorld
}
}
</script>
<style>
</style>
<template>
<div>
<p class="hello">{{msg}}</p>
</div>
</template>
<script>
export default {
//默认暴露一个模块
//配置对象，模板里面只能写函数不能写对象
data(){
return {
msg :"Hello vue"
}
}
}
</script>
<style>
.hello{
width: 200px;
height: 200px;
background-color: red;
}
</style>
2：项目打包发布运行
npm run dev 只是开发环境运行
//打包 npm run build
发布 1: 使用静态服务器工具包
npm install -g serve
serve dist
发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js
output: {
publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
3:eslint
(1) .eslintrc.js : 全局规则配置文件
'rules': {
'no-new': 1
}
(2) 在 js/vue 文件中修改局部规则
/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App }
})
(3) .eslintignore: 指令检查忽略的文件
*.js
*.vue