Vue项目部署及使用WebStorm开发Vue |
您所在的位置：网站首页 › oss部署vue › Vue项目部署及使用WebStorm开发Vue |
Vue项目部署及使用WebStorm开发Vue
|
Vue项目部署及使用WebStorm开发Vue
Vue项目部署搭建Vue环境新建Vue项目
使用WebStorm开发VueWebStorm相关配置
配置路由全局页面App.vue全局引入组件导航栏的灵活使用前后端对接axios简单封装ajaxconfig配置连接接口
Bulid打包
Vue项目部署
大家好！ 以下是我在学习vue时，关于部署vue项目的个人经验，现在还是vue小白，如果写的哪里有问题欢迎大家提出。 搭建Vue环境windows环境搭建Vue开发环境，推荐该博客阿梅の博客中的内容，本人按照上面步骤配置多台机器都一次成功。 安装脚手架命令cnpm install vue -g 安装vue-cli 脚手架(vue命令行工具)cnpm install vue-cli -g 新建Vue项目以下是我在新建vue项目时的心得记录，借鉴了阿梅の博客中的内容： 打开存放项目的文件夹，在路径栏直接输入CMD，回车，弹出命令提示符。 创建项目,在命令提示符只输入以下代码 vue init webpack 项目名称(英文) 按照图中选项选择安装，除了 Use ESLint to lint your code? 选择No以为其他全是默认选择即可。Use ESLint to lint your code? 选择Yes的话会因为排版不好而报错无法运行，个人很不喜欢。
初始化完成后的项目目录结构如下：
安装工程依赖模块。 cnpm install 定位到对应工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules。 使用nodejs启动运行该项目，测试一下该项目是否能够正常工作。 cnpm run dev 运行完成后在浏览器输入对应地址http://localhost:8080即可 ，我这里因为已经运行一个项目占用了8080端口，所以是8081。 前端vue开发主流的两大软件就是VS code(Visual Studio Code)与WebStorm。我个人偏向于使用WebStorm，因为VS code大部分功能都需要下载对应插件，而WebStorm主要功能都自带好了，我只下载过汉化插件。 WebStorm相关配置WebStorm下载安装，在 WebStorm官网下载即可。 WebStorm软件需要激活，我一般都是使用免费激活码，要是激活过期了可以点击链接再次激活。 WebStorm汉化 网上汉化教程大多都需要下载汉化包自己配置，我这里的方法只需点击两步即可。 我本地已经汉化过了，未汉化的话就点击顶部菜单栏File，选择Settings选项，也可以使用快捷键Crtl+Alt+S快速打开设置选项。 WebStorm配置run和build命令 选择添加配置 WebStorm终端，与命令提示符一样，可以直接输入命令执行。 前端路由文件router/index.js 新增页面index.vue，并在路由中配置路径为'/' App.vue位于src路径下，我这里把vue的logo图标以及全局居中，和上外边距注释了。 Vue前端常用组件库里有我整理的一些组件，这里以引入vant组件为例。 使用npm命令安装，在webstorm终端输入以下代码： npm i vant -S 安装完成后，在main.js中加入以下代码： import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
在components文件夹下新建Navbar.vue，代码如下： export default { name: "NavBar" }然后在App.vue中全局引用，并加入v-if判断，代码如下： 在src目录下新建axios文件夹，axios文件夹中新建axiosCore.js，testapi.js文件。 axiosCore.js封装ajax技术，里面有关于简单跨域问题的解决，可以在里面添加require header(请求头)内容。 import axios from "axios" import qs from 'Qs' // `withCredentials` 表示跨域请求时是否需要使用凭证 axios.defaults.withCredentials = false /****** 创建axios实例 ******/ const axiosCore = axios.create({ baseURL: process.env.TEST_URL, timeout: 10000// 请求超时时间 }) // request拦截器==>对请求参数做处理 axiosCore.interceptors.request.use(config => { config.method === 'post' ? config.data = qs.stringify(config.param) : config.params = config.param; config.param = null; config.headers['Content-Type'] = 'post' ? 'application/x-www-form-urlencoded' : 'application/json;charset=utf-8'; return config; }, error => { // 请求错误处理 Promise.reject(error) }) export default axiosCoretestapi.js文件，配置连接接口方法，可以方便调用。 import axiosCore from './axiosCore' export const Get = (data) => { return axiosCore({ url: '/', method: 'get', param: data }).then(data => data) } export const Post = (data) => { return axiosCore({ url: '/', method: 'post', param: data }).then(data => data) } 内容含义url接口地址methodget或postparamdata安装axios，终端输入以下运行命令。 cnpm install axios --save config配置dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', TEST_URL: '"接口路径前缀"' })pro.env.js 'use strict' module.exports = { NODE_ENV: '"production"', TEST_URL: '"接口路径前缀"' } 连接接口因为我自己不会后端所以就找了些网上的开源接口，进行连接 确认 {{item.name}} import axios from "axios"; export default { data() { return { qqNum: '', //qq号码 list: [], //信息列表 isShow: false, //头像，昵称是否显示 } }, methods: { // 确认按钮事件 btnGet() { let _this = this; _this.list = []; axios({ url: "https://api.oioweb.cn/api/qq.php", method: "get", params: { 'qq': this.qqNum } }).then(data => { if (data.data.code == 1) { _this.list.push(data.data); _this.isShow = true; // _this.$toast.success("登录成功"); } else { _this.$toast.fail(data.data.msg); } }); }, // 清除按钮 事件 clearInfor() { this.list = []; this.isShow = false; } }, name: "getQQ" }效果如下 注意直接build出来的网页或出现问题，要先在config/index.js文件中将两处assetsPublicPath: ‘/’ 改为assetsPublicPath: ’ ' |
然后在搜索框内输入Chinese，显示的第一个插件点击安装(Update)，安装完成后重启就汉化成功了。 
选择npm
命令选择run，脚本选择dev
如果需要build其他如上，脚本选择build即可
最后点击运行即可 
这里还有一个vue的logo，要在全局页面App.vue里去掉。
在index.vue页面中使用Vant的按钮组件 
最后，在路由index.js中选择是否显示，以及title，代码如下： 
效果如下： 
【本文地址】
今日新闻 |
推荐新闻 |