vue-cli | 易学教程

vue-cli项目如何利用mock 模拟数据

阅读更多关于 vue-cli项目如何利用mock 模拟数据

第一步：在项目中安装mockjs、axios（http请求库） cnpm install mockjs axios --save第二步：在项目中新建一个mock.js文件，用于定义接口返回的数据内容如下： const Mock = require('mockjs') // 获取mock对象 const Random = Mock.Random // 获取random对象，随机生成各种数据，具体请翻阅文档 const domain = 'http://mockjs.com/api' // 定义默认域名，随便写 const code = 200 // 返回的状态码 // 随机生成文章数据 const postData = req => { console.log(req) // 请求体，用于获取参数 let posts = [] // 用于存放文章数据的数组 for (let i = 0; i < 10; i++) { let post = { title: Random.csentence(10, 25), // 随机生成长度为10-25的标题 icon: Random.dataImage('250x250', '文章icon'), // 随机生成大小为250x250的图片链接 author: Random.cname(), // 随机生成名字 date: Random.date(

Vue基础

阅读更多关于 Vue基础

文章目录 Vue 的环境搭建常见的插件引用 Vue.js 文件安装 vue-cli（命令行工具）利用 vue-cli 新建一个空的项目 Vue 的环境搭建我们首先要安装好 NVM、Node.js环境，然后再来做下面的操作。常见的插件 Webpack：代码模块化构建打包工具。 Gulp：基于流的自动化构建工具。 Grunt ：JS 世界的构建工具。 Babel：使用最新的规范来编写 js。 Vue：构建数据驱动的Web界面的渐进式框架 Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。以上这些包，都可以通过 NPM 这个包管理工具来安装。引用 Vue.js 文件 1、方式一：（引用的方式） <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > < script src = " https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js " > </ script > </ head > < body > </ body > </ html > 2、方式二：（下载 vue.js 文件）去网站 https://cdn.jsdelivr

使用vue-cli搭建一个项目

阅读更多关于使用vue-cli搭建一个项目

一、安装node.js 　　1.根据电脑的自行下载node.js安装包 http://nodejs.cn 　　　　　　2.点击安装，按照正常的的一路点击下去　　3.验证安装是否成功，按键win+r,输入cmd打开命令行工具，点击确认后再输入node -v 出现版本好说明npm安装成功　　　　二、安装npm　　　　1.新版的node.js已经集成了npm，所以npm也一并安装好了。　　2.可以在cmd命令行输入"npm -v"来测试是否成功安装。如下图，出现版本提示便OK了。　　　　三、安装webpack 　　1. 安装webpack，按键wind+r再输入cmd点击enter键打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。　　　　四、安装vue-cli脚手架构建工具　　1.安装vue-cli脚手架构建工具，打开命令行工具输入：npm install --global vue-cli（cnpm install --global vue-cli），安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功　　　　 2.安装vue-cli cnpm install vue-cli -g //全局安装 vue-cli

vue.js三种安装方式

阅读更多关于 vue.js三种安装方式

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。下面介绍三种 Vue.js 的安装方法：独立版本我们可以在Vue.js的官网上直接下载vue.js,并在html中通过 <script> 标签中引用。 <script src = ../vue.js> </script> 开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）使用vue多页面开发：引入vue.js 创建一个vue根实例 new Vue({选项}) 使用CDN方法 BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ，（国内不稳定） unpkg： https://unpkg.com/vue/dist/vue.js , 会保持和 npm 发布的最新的版本一致。（推荐使用） cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（ <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue

在vue-cli中使用sass

阅读更多关于在vue-cli中使用sass

在vue-cli中使用sass 在vue-cli低版本中（3以下），我们需要自己在node中去配置css预处理器sass/less，配置方式如下 1. 安装 npm install node-sass --save-dev //--save表示本地安装 // -dev 表示开发时依赖（development n.研发，开发） npm install sass-loader@7.3.1 --save-dev //@：表示指定版本号下载同样的控制版本下载的方式还有**@** 、**~**两种方式 ^ ：会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0 ：会匹配最近的小版本依赖包，比如 1.2.3会匹配所有1.2.x版本，但是不包括1.3.0 2. 配置 module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png

Vue-cli的安装步骤详细版本

阅读更多关于 Vue-cli的安装步骤详细版本

https://github.com/vuejs/vue-cli 官网使用官方推荐的webpack 条件： node在4.以上，npm在3以上安装步骤： 1、cmd打开命令行窗口 2、输入cnpm install vue-cli -g，然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令) 3、安装结束后输入vue 如果显示版本号继续下一步操作 4、运行vue init webpack demo(注：项目名称)回车 5、显示Project nanme 目录名回车 project description 后面可以写上描述，或者直接回车 Author 后面可以写作者也可以回车 6、Install vue-router? 选择Y 7、User ESLint to lint your code? 选Y 8、Setup unit tests with Karma + Mocha? 问的是否要测试选n 9、Setup e2e tests with Nightwatch? 选n 10、这个时候在你创建的目录下就有你的目录了，然后cd 你的目录名进去cnpm install回车等待,这一步是安装依赖的，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件，如果这个文件夹没有那么项目是没办法跑起来的 11、创建结束后在创建目录里面按住shift

vue-cli 初始化一直downloading

阅读更多关于 vue-cli 初始化一直downloading

vue-cli 初始化error ***一直 downloading template 并且一段时间过后 vue-cli · Failed to download repo mpvue/mpvue-quickstart: connect ETIMEDOUT 52.74.223.119:443 网上有许多解决方法，但是都太繁琐难懂难搞，我在这里的解决办法是换一个网络来源： CSDN 作者： OnTheRoad_ING 链接： https://blog.csdn.net/OnTheRoad_ING/article/details/104117545

Vue 开发环境搭建

阅读更多关于 Vue 开发环境搭建

1.安装 node.js 链接：https://pan.baidu.com/s/1_v7VxB8BFJvRMBDWsDRu2Q 提取码：rsdf 检查是否安装成功 node -v 2.配置使用淘宝的镜像（cnpm） npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue cnpm install vue -g 4.安装vue脚手架（vue-cli） cnpm install vue-cli -g 来源： CSDN 作者：北海刘德华链接： https://blog.csdn.net/qq_39935901/article/details/104114782

Vue 'export default' vs 'new Vue'

阅读更多关于 Vue 'export default' vs 'new Vue'

问题 I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following: export default { name: 'app', data: [] } Whereas in other tutorials I see data being bound from: new Vue({ el: '#app', data: [] )} What is the difference, and why does it seem like the syntax between the two is different? I'm having trouble getting the 'new Vue' code to work from inside the tag I

vue-cli3学习整理----基础

阅读更多关于 vue-cli3学习整理----基础

核心 CLI（@vue/cli）：是一个全局安装的npm包提供命令：vue vue create //快速创建新项目的脚手架 vue serve //构建新想法的原型 vue ui //图形化界面 CLI服务（@vue/cli-service）：是一个局部安装的npm包，是一个开发环境依赖包 //构建于 webpack 和 webpack-dev-server 之上，包含： 1、加载其它CLI插件的核心服务 2、优化过的内部的webpack配置 3、提供命令：serve、build、inspect CLI插件（@vue-cli-plugin- [内建插件] 或 vue-cli-plugin- [社区插件] ）：提供可选功能的npm包 //在项目内部运行 vue-cli-service 命令时，自动解析并加载 package.json 中的所有CLI插件 vue add [插件名称] CLI（@vue/cli）需要额外安装全局扩展 @vue/cli-serivce-global //vue命令可以对单个*.vue文件进行快速原型开发 vue serve [options] [entry] 会在当前目录自动推导入口文件（入口文件可以是：main.js、index.js、App.vue、app.vue中的一个），也可以自定义入口文件 vue build [options]

订阅 vue-cli