vue-cli脚手架学习(一)

1.vue脚手架目录

2.工程目录说明

⼯程名（不能有⼤写字⺟）
|-- node_modules: 存放下载依赖的⽂件夹
|-- public: 存放不会变动静态的⽂件，它与src/assets的区别在于，public⽬录中的⽂件不被webpack打包处理，会原样拷贝到dist目录下
|-- index.html: 主⻚⾯⽂件
|-- favicon.ico: 在浏览器上显示的图标
|-- src: 源码⽂件夹
|-- assets: 存放组件中的静态资源
|-- components: 存放⼀些公共组件
|-- views: 存放所有的路由组件
|-- App.vue: 应⽤根主组件
|-- main.js: 应⽤⼊⼝ js
|-- .browserslistrc: 指定了项⽬可兼容的⽬标浏览器范围, 对应是package.json 的 browserslist选项
|-- .eslintrc.js: eslint相关配置
|-- .gitignore: git 版本管制忽略的配置
|-- babel.config.js: babel 的配置,即ES6语法编译配置
|-- package-lock.json: ⽤于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他⼈在 npm install 项⽬时⼤家的依赖能保证⼀致.
|-- package.json: 项⽬基本信息,包依赖配置信息等
|-- postcss.config.js: postcss⼀种对css编译的⼯具，类似babel对js的处理
|-- README.md: 项⽬描述说明的 readme ⽂件

3.最终发布步骤

• 1:在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）
  module.exports = {
  publicPath:’/工程名/’
  }
• 2:构建打包 npm run build
• 3:dist 目录拷贝到 tomcat\webapps 目录下，然后将 dist 目录名 修改为 工程名
• 4:打开 tomcat/bin/startup.bat 启动服务器（注意之前启动的 8080 端口项目要先停止）
• 5:访问：http://localhost:8080/工程名/