Vue CLI

一、简介说明 1.关于VS Code开发工具，安装和配置，更多 可以参考以前文章 2.关于Vue.js，Vue是一个优秀的渐进式前端框架，不仅易于上手，还便于与第三方库或既有项目整合。 3.关于Vue是使用方式有两种，第一种、最简单方式和以前使用jquery框架似的引入Vue，直接编写使用；第二种，使用Vue 官方提供的 Vue CLI搭建开发环境。 4、关于 Vue CLI CLI ( @vue/cli ) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。 常用操作： 创建项目： vue create helloworld 运行项目： npm run serve 编译项目：npm run build 二、搭建步骤 1.首先安装NodeJs 框架，如果已经安装本步骤，忽略。 如需了解安装步骤： https://blog.csdn.net/u011127019/article/details/56666472 2.安装 Vue CLI 工具，使用npm命令即可 npm install -g @vue/cli 验证是否安装成功： vue --version 3.使用Vue CLI 命令创建一个项目 vue create manage 4

本文转载于: 猿2048 网站 vue-cli启动本地服务，局域网下通过ip访问不到的原因 1.问题描述： 新开发了一个vue-cli项目，想通过手机查看效果，发现访问不到，ip地址和端口号都没错但是手机访问不到，在本机电脑浏览器输入ip端口号一样访问不到，只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问地址是localhost:8080 3.改正的方式 找到config文件夹下的index.js文件,修改host:“localhost”为 host:"0.0.0.0",此时同一局域网下的手机和其他电脑能通过ip+端口号查看到页面 来源： https://my.oschina.net/u/4191619/blog/3099024

一、在模块编程中安装VueRouter 1.Npm安装vue-router npm install vue-router 2.在main.js中引用并使用VueRouter import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 3.定义路由，创建路由实例 /** * 定义路由,懒加载处理 */ const routes = [ { path: '/index', component: () => import('./components/Index.vue') }, { path: '/test', component: () => import('./components/Test1.vue') } ]; //创建路由实例 const router = new VueRouter({ routes }); 4.注册路由实例 //注册路由实例 new Vue({ router, render: h => h(App) }).$mount('#app') 二、Vue Router基础使用示例 1.App.vue 页面定义，使用router-link定义链接，使用router-view定义视图占位符 <template> <div id="app"> <el-row> <router

前后端分离的开发模式已经是目前前端的主流模式，至于为什么会前后端分离的开发我们就不做过多的阐述，既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中，由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目，这样会使我们的前后端会同时的进行，提高我们的开发效率。 因为最近自己在自学 Vue 也在自己撸一个项目，肯定会遇到使用数据的情况，所以就想着如何在前端做一些 mock 数据的处理，因为自己的项目使用的是 vue/cli 3.0 与 vue/cli 2.0 的使用有一些的不同，所以在这里记录一下。 注意：本文主要说的是如何配置本地静态文件的 mock 数据的方式 首先我们来说一说vue/cli 3.0 与 2.0 的一些不同： 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置即可。 2.0 的文件结构 3.0 的文件结构 可以看到 3.0 版本的脚手架在项目结构上精简了很多，看上去没有那么的繁琐。接下来我就进行 mock 数据的配置，再说 3.0 之前，我们先看看 2.0

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤，本人假设已经安装好了Vue CLI工具，了解更多参考： VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 vue create hello2 创建过程比较慢，需要稍等片刻。提示选择模板地方使用默认就可以了。 2.添加插件 vue add router 添加过程中，提示是否使用模块方式编程，选择yes就可以了 3.运行项目 npm run serve 运行成功后就可以开发调试了。 创建成功后的项目 创建成功后，会自动下载插件，并生成 router.js 文件，用于配置路由： import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this

搭建缘由 源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后，每个人再去从私服pull一下项目才开始开发。但是每次初始化工程都是一步步的造轮子，一个个依赖去安装，新建一个个不同功能的文件夹，而每个负责人所初始化的项目目录、以及模块引入方式参差不齐，以至于开发中后期因每个人开发风格的不同导致git提交时总会产生各种各样的“冲突”，也会产生后期代码维护成本增加，所以就有必要考虑一下做一个统一的类似“脚手架”的功能了，用来给团队开发带来便捷的、统一的、易扩展的项目基础。 预实现的功能 公共样式统一管理，全局sass的友好引入 公共js统一管理 解决vue脚手架初始化的部分问题 路由形式、接口统一管理 store模块化管理 定义vue前端项目必用的方法 修改好统一的config配置 全局混入/指令的封装 必要的依赖项 node-sass sass sass-resources sass-loader sass-recources-loader vuex vuex-persistedstate axios babel-polyfill 项目目录如下 配置公共sass 目录assets>scss文件形式 mixin.scss内容详见 mixin公共sass函数 common.scss内容如下 @import './mixin.scss'; // 公共函数 @import '.

本编接着上篇后端基于Netty服务器的websocket服务 ,做一个前端的简单展示 顺便学习一下前端的知识点,关于js的websocket通信方式和http请求也差不多,看下面: var socket = new WebSocket("ws://[ip地址]:[端口]"); ws:// 部分是一个协议,比如http://,https:// 都很类似 ; ip,端口什么的就不说了 包含以下函数: onopen() , onmessage() , onerror() , onclose() , Socket.send() , Socket.close() onopen 建立连接时触发 onmessage 服务端向客户端发送消息,接收到消息时触发 onerror 错误时触发 onclose 关闭连接时触发 send 主动发送消息给后端,比如回车发消息 close 主动关闭socket连接,比如关闭聊天窗口,退出游戏等 看上去像websocket请求的生命周期,前端和后端的通道Channel差不多的生命周期 函数也不多,理解了作用就可以直接上手操作了,使用vue-cli搭建vue进行测试,很快,并搭配了element-ui构建ui界面 vue页面代码如下: <template> <div id="page"> <div> 发送消息: <el-input size="medium"

1、查看vue版本：vue -V 确认是否要升级 2、卸载：sudo npm uninstall vue-cli -g 或 yarn global remove vue-cli 3、安装：sudo npm install -g @vue/cli 或 yarn global add@vue/cli Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 来源： oschina 链接： https://my.oschina.net/lzyoo/blog/3133934

1.安装 （npm新版本 包命名更严格, vue-cli3.0相应跟着变化） 2.0安装 $ npm install -g vue-cli 3.0安装 npm install -g @vue/cli 2.目录结构： 2.0生成目录结构： 3.0目录结构： 从CLI 3的整个项目结构我们可以发现，这个结构很简单，没有相关的配置文件或复杂的目录结构。CLI 3仅生成构建应用程序所需的文件，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。 CLI 3启动方式是内置服务 vue-cli-service serve CLI 2启动方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 这里用webpack-dev-server搭一个服务 3.0版本下，你想看看默认的webpack配置，可执行vue inspect查看，默认情况下，会将配置输出到控制台，你也可以将结果指向一个文件，例如：vue inspect > webpack.config.js 图形化界面 ： 安装好了CLI 3的前提下，执行vue ui命令 ，会自动在浏览器打开图形界面。 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3009125

最近复习了下vue，突然发现vue-cli已经更新到3.0版本了，并且变化蛮大，看来要不停的学习，真是一入前端深似海。 安装步骤： 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。 2、通过vue --version查看版本信息，来确定是否安装成功 E:\vue\Vueexample3.0\new-hello>vue --version 3.0.0 3、创建一个项目 ，cd到要创建项目的文件夹，输入下面命令 vue create new-hello 安装的过程中会提示设置选项 按Enter键选择preset或者default选项，如果手动选择，按键盘的向上的箭头，然后选择下面的信息 用上下箭头移到选项行，通过空格键控制选中或者取消，全部选择好后按Enter后，会提示保存为一个将来可复用的 preset，并输入保存的preset的名称（被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里），等项目创建完成后，会显示下面的界面，如果我们安装完vue-cli 3.0 后再装插件 可以用命令 vue add router