入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）
1. 安装npm2. 安装 Vue CLI3. 创建 vue_demo1 项目（官网）3.1 创建 vue_demo1 项目3.1.1 创建项目3.1.2 解决 sudo 问题
3.2 查看创建的 vue_demo1 项目3.2.1 项目结构3.2.2 项目结构简单说明
3.3 运行 vue_demo1 项目
4. 创建 vue_demo2 项目（入门练习）4.1 创建项目4.2 编写组件4.3 编写main.js4.4 编写index.html4.5 启动看效果4.6 附代码4.6.1 组件4.6.2 其他
5. tomact 上部署脚手架vue项目51. 安装 并 启动 tomcat5.2 部署vue项目5.3 访问项目
6. nginx 上部署脚手架vue项目6.1 关于nginx的安装、配置等6.2 将打包后的dist文件上传的服务器上6.2.1 上传服务器6.2.2 注意问题-403
6.3 配置nginx6.4 重启nginx，访问看效果6.5 防火墙问题
7. 遇到的问题7.1 组件之间样式冲突7.2 部署服务器上的页面不加载7.2.1 详细问题如下：7.2.2 问题原因 + 解决问题
8. 项目下载
1. 安装npm
详细参考下面的文章： npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等.
2. 安装 Vue CLI
安装前可使用 nrm 切换到淘宝镜像，如下：nrm use taobao
安装命令：npm install -g @vue/cli
# OR
yarn global add @vue/cli
sudo npm install -g @vue/cli #Mac
使用命令，查看安装版本vue
vue -V
官网地址： https://cli.vuejs.org/zh/.
3. 创建 vue_demo1 项目（官网）
3.1 创建 vue_demo1 项目
3.1.1 创建项目
命令：vue create vue_demo1
sudo vue create vue_demo1 # Mac的要想解决这个sudo的束缚，看下面的 3.1.2 解决 sudo 问题
3.1.2 解决 sudo 问题
每次必须加上 sudo 挺麻烦的，想要解决的话，根据提示解决，先看提示，如下： 输入提示命令解决：sudo chown -R 501:20 "/Users/XXX/.npm"
3.2 查看创建的 vue_demo1 项目
3.2.1 项目结构
如下：
3.2.2 项目结构简单说明
main.js 文件是项目的入口 App.vue 组件是所有组件的父组件
3.3 运行 vue_demo1 项目
命令如下：npm run serve
sudo npm run serve # Mac权限问题用这个
访问：
4. 创建 vue_demo2 项目（入门练习）
4.1 创建项目
跟上面的步骤一样，再创建一个新的项目 vue_demo2 ，用于修改练习，创建过程不再介绍。
4.2 编写组件
组件结构如下：
4.3 编写main.js
如下：import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:'#dogZool',
render: h => h(App),
});
4.4 编写index.html
如下：
4.5 启动看效果
打包项目 npm run build
启动命令： npm run serve
效果：
4.6 附代码
4.6.1 组件
ZooHead.vue
DogInfo.vue
02-狗狗信息
| 狗狗编号 | 狗狗姓名 | 狗狗性别 | 狗狗年龄 | 狗狗种类 | 备注 |
|---|---|---|---|---|---|
| {{dog.dogNum}} | {{dog.dogName}} | {{dog.sex}} | {{dog.dogAge}} | {{dog.dogKind}} | {{dog.dogDesc}} |
ZooBottom.vue
App.vue
4.6.2 其他
main.js import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:'#dogZool',
render: h => h(App),
});
index.html
5. tomact 上部署脚手架vue项目
51. 安装 并 启动 tomcat
关于 tomcat的安装等问题，自己解决一下，或者参考下面的文章： linux下安装tomact.
5.2 部署vue项目
将 build 后的 dist 文件上传到服务器上，放到 tomcat 的 webapps 目录下，我这里又加了一层 vue_demo ，如下：
5.3 访问项目
直接输入，访问即可，注意端口号，我这里把tomact 的端口改成了 8089，如下：http://服务器IP:tomact端口/vue_demo/dist/index.html
6. nginx 上部署脚手架vue项目
6.1 关于nginx的安装、配置等
关于nginx的安装、配置等，可看下面的文章
Nginx 01篇——Nginx详细安装步骤以及Nginx各种启动方式Nginx 02篇——Nginx基本配置与参数说明篇Nginx 03篇——Nginx配置实例
6.2 将打包后的dist文件上传的服务器上
6.2.1 上传服务器
存放目录，如下：cd /nginx_test/vue_project/vue_demo
6.2.2 注意问题-403
我这里刚开始将项目放到了 susu 用户下，如下： 出先的问题就是 403，如下： 问题原因： 我这里是 root 用户启动的 nginx，所以这里有访问权限的问题。 解决问题： 解决办法：把 nginx 的启动用户改成目录的所属用户，重启 Nginx 即可解决，配置如下： user susu
重新访问
修改完配置之后，然后 root 用户重启动 nginx，再次访问，问题已解决。 当然，也可以用 susu 用户启动，root 用户安装的 nginx 也可以，如下： sudo ./nginx
如果因为权限问题不能启动，请参考下面这篇文章： linux下新建用户并给用户授权以及解决 sudo 不能使用问题.
6.3 配置nginx
如下： server {
listen 9007;
server_name 服务器IP;
location /dist/ {
# root /home/susu/vue_project/vue_demo/;
root /nginx_test/vue_project/vue_demo/;
}
}
6.4 重启nginx，访问看效果
如下：http://服务器IP:9007/dist/index.html
6.5 防火墙问题
如果拒绝访问，查看防火墙问题，可以看下面的文章： linux下查看防火墙状态、关闭防火墙、开放关闭端口等.
7. 遇到的问题
7.1 组件之间样式冲突
解决问题： 用 style 标签上的 scoped 属性，如下：
7.2 部署服务器上的页面不加载
7.2.1 详细问题如下：
本地启动： 服务器上：
7.2.2 问题原因 + 解决问题
问题原因： 资源路径问题，服务器上路径不对，解决路径即可解决问题： 在vue.config.js中配置 publicPath:'./' 即可，如下： 打包，重新部署问题解决！
8. 项目下载
下载：vue脚手架项目入门demo（vue2）.
参考阅读
发表评论