vue系列1：创建vue项目

一、说明

1、vue-cli 是 vue 官方提供的脚手架工具

2、github:https://github.com/vuejs/vue-cli

3、作用: 从 https://github.com/vuejs-templates 下载模板项目

 

二、创建 vue 项目 1、npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息。

 

2、输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖。

 

3、安装vue-cli脚手架构建工具，输入命令npm install -g vue-cli，安装完成即可。

 

4、选定路径，新建vue项目，这里我是新建到桌面上。

 

5、在上一步的目录下新建项目，指令vue init webpack 项目名称。

 

6、进入到项目的文件夹下。

 

7、运行项目，指令npm run dev。

 

8、在浏览器中打开这个网址。

 

三、vue项目结构

|–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 文件

 

四、vue项目的打包与发布

1、第一种方式：

打包：npm run build

此时会在项目路径下生成一个dist文件，修改 dist 文件夹为项目名称：xxx，将 xxx 拷贝到运行的 tomcat 的 webapps 目录下。访问:http://localhost:8080/xxx

 

2、 第二种方式：

修改配置：webpack.prod.conf.js
  output:{
   publicPath:’/xxx/’ //打包文件夹的名称
  }

重新打包:　npm run build
 修改 dist 文件夹为项目名称：xxx
 将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
 访问:http://localhost:8080/xxx

 

转自：https://blog.csdn.net/lizhiqiang1217/article/details/90314916