VUE：项目的创建、编写及打包
项目的创建
使用 vue-cli 创建模板项目（官方提供的脚手架工具）
https://github.com/vuejs/vue-cli
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问：http://localhost:8080/
第一个命令需要有npm。可以使用node -v查看是否已经安装，如没有可用下面的传送门
第二个命令使用时注意切换到想要创建的位置
项目的编写
HelloWorld.vue
<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template> <script>
export default { //配置对象（与Vue一致）
data () {
return {
msg: 'TaoSir is studying...'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.msg{
color:red;
font-size: 30px;
}
</style>
App.vue
<template>
<div id="app">
<img class="logo" src="./assets/logo.png" alt="logo">
<!--3.使用组件标签 -->
<HelloWorld/>
</div>
</template> <script>
//1.引入组件
import HelloWorld from './components/HelloWorld' export default {
//2.映射组件标签
name: 'App',
components: {
HelloWorld
}
}
</script> <style>
.logo{
width: 200px;
height: 200px;
}
</style>
main.js
/*
* 入口js：创建Vue实例
*/
import Vue from 'vue'
import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
打包
npm run build
发布1：使用静态服务器工具包
npm install -g serve
serve dist
访问：http://localhost:5000
发布2：使用动态web服务器（tomcat）
修改配置：webpack.prod.conf.js
output:{
publicPath : '/xxx' //打包文件夹的名称
}
重新打包：npm run build
修改 dist 文件夹为项目名称：xxx
将xxx拷贝到运行的tomcat的webapps目录下
规则的错误等级
1）0：关闭规则
2）1：打开规则，并且作为一个警告（信息打印黄色字体）
3）2：打开规则，并且作为一个错误（信息打印红色字体）
在项目根目录下找到该文件修改
规则名：等级
重启服务生效