标签：render height css 引入 local webp als 实例 第一个
使用 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
npm install -g serve
serve dist
访问：http://localhost:5000
修改配置：webpack.prod.conf.js
output:{
publicPath : ‘/xxx‘ //打包文件夹的名称
}
重新打包：npm run build
修改 dist 文件夹为项目名称：xxx
将xxx拷贝到运行的tomcat的webapps目录下
1）0：关闭规则
2）1：打开规则，并且作为一个警告（信息打印黄色字体）
3）2：打开规则，并且作为一个错误（信息打印红色字体）
在项目根目录下找到该文件修改
规则名：等级
重启服务生效
标签：render height css 引入 local webp als 实例 第一个
原文地址：https://www.cnblogs.com/it-taosir/p/9966767.html
