Vue CLI

BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。BootstrapVue 作为学习 Vue.js 框架本身的入门框架，我认为是非常不错的。Bootstrap 框架本身是轻量级的、易于学习的，在世界范围内非常流行，有许多第三方插件和主题样式。Vue.js 作为一个渐进式框架，核心库只关注视图层，不仅易于上手，还便于与第三方框架或既有项目整合。 作为 Vue.js 新手，这篇文章旨在记录 BootstrapVue 框架的安装步骤。 准备工作，安装 Vue CLI Vue CLI 包名称从 vue-cli 改成 @vue/cli。如果安装了老版本的 vue-cli（1.x 或 2.x），需要先移除老版本： npm uninstall -g vue-cli 再安装新版本： npm install -g @vue/cli 查看 vue 版本： vue --version 如果显示 3.x，表明安装正确了。 新建 Vue 项目 vue create bootstrapvue-demo 当提示 Please pick a preset 时，选择默认的 default 并回车。 运行 Vue 项目 cd bootstrapvue- demo npm run serve 浏览器访问 localhost:8080，如下图显示就表明成功了。 安装

1.安装node环境，然后在命令行输入node -v 和npm -v 查看版本号 2.在正式开始项目之前我们先介绍一下vue-cli，vue-cli是一个脚手架工具，vue-cli是帮助我们写好vue.js基础代码的工具，可以帮助我们生成一个项目目录，可以本地调试，单元测试，代码部署等等。 安装vue-cli $ npm install -g vue-cli 开始创建项目 使用vue-cli $ vue init <template-name> <project-name> 第一个是模板名称，第二个是项目名称，模板有webpack，webpack-simple ，browserify ，browserify-simple ，simple我们这个项目使用的是 webpack 。 下面我们就来搭建一个项目名称为myvue模板为webpack的vue项目(注：此处项目名不可有大写)： vue init webpack myvue 接下拉终端里面会问你（也可能会跟你说vue不是内部或外部命令，本篇文章结尾会有解决办法） ? Project name (myvue) 项目名称是不是 myvue ，我们按回车，表示，是。当然，你也可以重写一个，然后回车。 然后 ? Project description (A Vue.js project) 项目描述，一个 vue.js 的项目。同样

一、安装Node.js 1.1 官网进行下载： https://nodejs.org/zh-cn/ （推荐多数人下载的LTS版本） 下载完后，一直Next直到安装完成即可。 1.2 查看是否安装完成 以管理员权限打开控制命令行程序(CMD),输入 node -v 以及 npm -v 检查是否安装成功。下为成功图： 二、安装 使用淘宝 NPM 镜像 2.1 安装镜像 国内使用npm的官方镜像速度很慢，推荐使用淘宝的npm镜像 链接：npm install -g cnpm --registry=https://registry.npm.taobao.org 三、项目构建初始化 3.1安装vue-cli指令：cnpm install vue-cli -g ，安装成功结果图： 3.2 使用 VS CODE 搭建一个项目 首先，选择新建好的文件夹 其次，输入指令 vue init webpack 项目名称；手动创建可以直接按4个回车进行下一步， 其中第一行默认为上面指令赋予的项目名称，第二行为描述，第三行为作者名可为空， 接着都输入n，拒绝自动生成。 3.3 启动项目 指令：cnpm run dev，我这边报错了如下图： run : 无法将“run”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写， d 如果包括路径，请确保路径正确，然后再试一次。 所在位置 行:1

　　由于公司近期有新的H5项目开发，而前端的同事也离职了，所以就临时顶缸，研究学习一下Vue框架开发。 　　本人也是初学，在学习过程中，把一些学习所得分享出来，可能会有很多问题和疏漏，希望大家能够多多指正，共同进步。 一、环境准备 ： 　　1. Node.js：在 nodejs官网 下载最新的安装包，选择安装目录，傻瓜式安装。安装完成后，打开dos命令，输入node -v命令，会显示安装的nodejs版本，表明安装成功。因为默认安装nodejs时，会自动安装npm，在dos命令窗口输入npm -v命令，会显示安装的npm版本。 　　　　 　　2. VScode：直接选择目录，一键安装即可；需要汉化的，在扩展中，搜索Chinese，找到中文简体的插件安装，然后重启即可。 　　 二、环境安装及配置 ： 　　1. 更改配置和缓存目录 　　为方便管理，且减轻系统盘压力（默认会把配置和缓存放到个人文档AppData下），将nodejs的node_global和node_cache转移至nodejs安装目录下。在nodejs安装目录下，创建node_global和node_cache两个文件夹，分别执行如下语句（XXXX指nodejs安装目录） npm config set prefix " XXXX\node_global " npm config set cache " XXXX\node

下载： Vue3 系统入门与项目实战完整无密 谁说为0基础准备的课，就一定浅薄？本课程带你轻松入门、深度掌握 Vue3，夯实前端硬技能。课程从 Vue3 基础语法，到组件原理，动画，代码设计，再到新语法扩展，由浅入深，全面、系统地梳理 Vue 知识点。在学习过程中，还有老师多年的“避坑经验”倾囊相授 ，并在最后带你按照企业级别代码质量和工程开发流程完成“京东到家”应用，实现对框架的彻底掌握。 适合人群 想要从零开始彻底入门 Vue 的同学； 想要了解清楚 Vue3 原理和新语法的同学； 希望扩展前端知识面，寻求升职加薪机会的同学 技术储备要求 熟悉JS基础语法； 了解Npm开发环境； 了解Webpack基本操作 第1章 Vue 语法初探 试看 本章中，将会通过编写实际例子，带你对Vue的语法有个粗浅的认知，让大家结合例子，有一些自己的疑问，从而带着问题继续学习，以便于更好的理解和掌握后面的知识点。 共 5 节 (57分钟) 收起列表 1-1 课前须知，这里有你需要了解的一切 (04:34) 试看 1-2 初学编写 HelloWorld 和 Counter (14:41) 1-3 编写字符串反转和内容隐藏小功能 (09:32) 1-4 编写TodoList 小功能，了解循环和双向绑定 (11:18) 试看 1-5 组件概念初探，对 TodoList 进行组件代码拆分 (16:47)

#vue-cli介绍 vue-cli是一个基于nodeJs、用于快速搭建vue项目的 脚手架。 #vue-cli安装、更新 安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）： npm install -g vue-cli 查看安装成功否 vue -V #vue-cli 使用 安装过webpack 、vue-cli后，可以开始搭建vue项目： vue init webpack <Project Name> # vue init webpack demo #一直回车直到 #是否要安装 vue-router 项目中肯定要使用到 所以 y 回车 #是否需要 js 语法检测 目前我们不需要 所以 n 回车 #是否安装 单元测试工具 目前我们不需要 所以 n 回车 #是否需要 端到端测试工具 目前我们不需要 所以 n 回车 #等待完成 或者 接下来 ctr+c 结束 #进入 cd demo cd demo #执行 npm install npm install #接下来执行 npm run dev npm run dev #默认浏览器会自动打开 #注意：如果您的浏览器是ie9以下的版本，请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问 来源： oschina 链接：

本文转自： Vi的技术博客 什么是跨域 首先，我们需要了解一下一个URL是怎么组成的： // 协议 + 域名（子域名 + 主域名） + 端口号 + 资源地址 http: + // + www.baidu.com + :8080/ 只要协议，子域名，主域名，端口号这四项组成部分中有一项不同，就可以认为是不同的域，不同的域之间互相访问资源，就被称之为跨域。 随着前后端分离开发的越来越普及，会经常遇到跨域的问题，当我们在浏览器中看到这样的错误时，就需要意识到遇到了跨域： XMLHttpRequest cannot load http://目标地址No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页面地址' is therefore not allowed access. 解决跨域的几种方案 首先，我们使用vue-cli来快速构建一个前端项目，然后使用axios来向后台发送ajax请求。然后在控制台中打印出返回信息。这里就不再多做赘述，后面我会单独写一篇文章来讲一下如何使用vue-cli快速创建一个vue项目。 这里不再讲解使用jsonp的方式来解决跨域，因为jsonp方式只能通过get请求方式来传递参数，而且有一些不便之处。

今天这篇文章是讲述一下 融合了vue-cli+electron的一种新的脚手架，省去许多繁琐配置，即vue-electron。 下面就说一下安装和使用，假设你的电脑已经安装node.js,并且已经全局搭建好vue-cli脚手架，如果没有的话，打开终端：$npm install --global vue-cli 全局安装。 1.新建文件夹，cd 到你将要安装的文件夹目录，$vue init simulatedgreg/electron-vue 这一步骤极其相似于当初安装vue-cli脚手架时，一个一个步骤来，截几张图 类似于这样 选择 enter yes 或者 no 看自己的选择 注意这一步呢，我选择了electron-packager 项。到这里你就可以看到，本来的空文件夹里现在新建了vue-electron基础文件 2.$npm install 这一步主要是安装依赖，耗时有点久。完毕后项目内多了node_modules 文件夹，里面东西较多。如图： 3.$npm run dev 会出现的 界面如图：右下角是一起出来的控制台 哈哈，完美呈现出来桌面应用。 4.打包。先看看项目package.json文件截图 scripts内各种打包命令，其中就包括Mac、Windows、Linux三大平台。例如我想在Mac上打包运行，$npm run build:darwin

搭建项目脚手架工程 是 架构师必需必会的基础技能 。 在脚手架的帮助下，我们只需要跑一个命令就可以生成一个项目，不需要再思考项目的目录结构，单元测试，所需要的依赖等繁琐的事情。 虽然脚手架一般只用于前端工作流中项目的起始阶段，而且由于“用后即弃”的性质，并不被前端工程化领域所重视。但 随着前端工程体系越来越复杂，脚手架的重要性却在逐渐突出。 引用 《前端工程化：体系设计与实践》 书里的一段话：“前端工程体系的功能涵盖范围广，封装的方案类型多，对应的配置项也非常复杂。对于多数业务开发者来说，他们不需要了解其中的复杂原理，只需要知道如何配置即可。” 这就要求脚手架能够快速开发快速配置，将非必要的工程化体系的技术细节封装到一个黑盒中，把一线业务开发人员从不必要的工程体系相关繁琐的工作开发任务隔离开来，提高相关业务人员关注的业务本身，提高专注性，提高生产效率。 轻松构建你自己的脚手架 我们熟知的vue-cli，create-react-app都是前端圈最知名、最流行、最大众化的脚手架工具，但是实际工作的时候，常常会有凭现有工具无法满足的复杂需求。 这就需要我们掌握快速开发自己的脚手架工具的能力。 在这里给大家推荐一套视频教程—— 《从0到1用Node完成一个CLI工具》 帮助你： 从零构建一个Cli工具 command命令行 模板库代码拉取 Vue约定路由功能 npm库发布

Vue.js+vue-element搭建属于自己的后台管理模板：创建一个项目（四） 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目，在学习Vue CLI之前我们需要先了解下webpack 代码编译工具，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。 webpack 官方中文文档地址： https://www.webpackjs.com/concepts/ Vue CLI 脚手架构建工具 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，搭建交互式的项目脚手架，Vue CLI版本3.x开始包名称由vue-cli 改成了 @vue/cli， 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载后再安装3.x版本，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。 安装Vue CLI 在命令行输入： cnpm install -g @vue/cli （安装新包） 我们这里推荐用vue-cli 3.x构建项目，新版优化了编译速度，不过你也可以通过老版本创建项目，老版本安装命令：cnpm install --global vue-cli 备注： 安装后，检查是否安装成功 。vue