南宁网站建设报价,北京制作手机网站,哪些网站做魔兽地图,怎么做微信钓鱼网站吗入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目#xff08;vue2#xff09; 1. 安装npm2. 安装 Vue CLI3. 创建 vue_demo1 项目#xff08;官网#xff09;3.1 创建 vue_demo1 项目3.1.1 创建项目3.1.2 解决 sudo 问题 3.2 查看创建的 vue_demo1 项目3… 入门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/clisudo 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_demo1sudo vue create vue_demo1 # Mac的要想解决这个sudo的束缚看下面的 3.1.2 解决 sudo 问题3.1.2 解决 sudo 问题
每次必须加上 sudo 挺麻烦的想要解决的话根据提示解决先看提示如下 输入提示命令解决sudo chown -R 501:20 /Users/XXX/.npm3.2 查看创建的 vue_demo1 项目
3.2.1 项目结构
如下
3.2.2 项目结构简单说明
main.js 文件是项目的入口 App.vue 组件是所有组件的父组件
3.3 运行 vue_demo1 项目
命令如下npm run servesudo 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.vueVue.config.productionTip falsenew 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 templatedivh2 {{zoolTitle}}/h2nav stylefloat: right;a href#首页/aa href#我的关注/aa href#我的收藏/aa href#我的/a/nav/div
/templatescriptexport default{name:ZooHead,data() {return{zoolTitle:01-欢迎来到狗狗乐园}}};
/script!-- scoped 处理组件样式冲突 --
style scopeddiv{height: 80px;}h2{color: green;}nav a{padding-left: 20px;}/styleDogInfo.vue templatediv h2 02-狗狗信息/h2tablecaption狗狗信息/captiontheadtrth狗狗编号/thth狗狗姓名/thth狗狗性别/thth狗狗年龄/thth狗狗种类/thth备注/th/tr/theadtbodytr v-fordog in dogs v-bind:keydog.dogNumtd{{dog.dogNum}}/tdtd{{dog.dogName}}/tdtd{{dog.sex}}/tdtd{{dog.dogAge}}/tdtd{{dog.dogKind}}/tdtd{{dog.dogDesc}}/td/tr/tbody/table/div
/templatescriptexport default{name:DogInfo,data() {return{dogs:[{dogNum:A1001,dogName:麦兜,sex:女,dogAge:3,dogKind:边牧,dogDesc:温柔、调皮又粘人},{dogNum:A1002,dogName:贝塔,sex:女,dogAge:3,dogKind:边牧,dogDesc:性格温柔},{dogNum:A1003,dogName:大牙,sex:男,dogAge:2,dogKind:边牧,dogDesc:活泼},{dogNum:A1004,dogName:泡泡,sex:女,dogAge:6,dogKind:柯基,dogDesc:性格温柔}, {dogNum:A1005,dogName:乐乐,sex:男,dogAge:1,dogKind:柴犬,dogDesc:调皮},{dogNum:A1006,dogName:闪闪,sex:男,dogAge:9,dogKind:秋天,dogDesc:高傲},{dogNum:A1007,dogName:托尼,sex:女,dogAge:3,dogKind:边牧,dogDesc:聪明} ]}}};
/scriptstyle scopedtable caption{font-size: 25px;background-color: aqua;}table{background-color: aqua;border: 1px solid;border-collapse: collapse;width: 800px;height: 300px;margin-bottom: 30px;/* border-radius: 10px; */}th,td{border: 1px solid;text-align: center;}h2{color: rebeccapurple;}/styleZooBottom.vue templatediv h2 {{zoolMore}}/h2footernava href#关于我们/aa href#联系我们/aa href#友情链接/aa href#了解更多/a/nav/footer/div
/templatescriptexport default{name:ZooBottom,data() {return{zoolMore:03-更多}}};
/scriptstyle scopedh2{color: skyblue;}a{padding-left: 20px;}/styleApp.vue templatedivZooHead/ZooHeadhrDogInfo/DogInfohrZooBottom/ZooBottom/div
/templatescript//引入组件import ZooHead from ./components/ZooHead.vueimport DogInfo from ./components/DogInfo //.vue 可省略import ZooBottom from ./components/ZooBottomexport default{name:app,components:{ZooHead,DogInfo,ZooBottom}};/scriptstyle
/style4.6.2 其他 main.js import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({el:#dogZool,render: h h(App),});index.html !DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodydiv iddogZoolApp/App/div/body
/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.html6. 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_demo6.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.html6.5 防火墙问题
如果拒绝访问查看防火墙问题可以看下面的文章 linux下查看防火墙状态、关闭防火墙、开放关闭端口等.
7. 遇到的问题
7.1 组件之间样式冲突
解决问题 用 style 标签上的 scoped 属性如下
7.2 部署服务器上的页面不加载
7.2.1 详细问题如下
本地启动 服务器上
7.2.2 问题原因 解决问题
问题原因 资源路径问题服务器上路径不对解决路径即可解决问题 在vue.config.js中配置 publicPath:./ 即可如下 打包重新部署问题解决
8. 项目下载
下载vue脚手架项目入门demovue2.
