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查看是否已经安装，如没有可用下面的传送门

npm是什么及其安装

第二个命令使用时注意切换到想要创建的位置

http://localhost:8080

项目的编写

HelloWorld.vue

复制代码

{{msg}}

复制代码
App.vue

复制代码

复制代码
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：打开规则，并且作为一个错误（信息打印红色字体）

在项目根目录下找到该文件修改

规则名：等级

重启服务生效

作者：涛先森の日常
转载于添加链接描述：https://www.cnblogs.com/it-taosir/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。