第一个 vue-cli项目

手动实现一个vue cli

目录手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个容易想到的是Vue, 然后是我们假设项目需要使用elementUI , 还有axios ,先就这些: 4. 我们的目标是要把src 中的从main.js 开始去编译-打包,到dist 文件夹中去, 所以我们需要配置文件,进行配置. 所以创建webpack 的配置文件, webpack.config.…

改造@vue/cli项目为服务端渲染-ServerSideRender

VUE SEO方案二 - SSR服务端渲染在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服务端渲染. 1.概述官方文档服务端渲染的配置相比预渲染就复杂多了,要做到同构,还要保证服务端和客服端的组件状态一致,我们需要对整个项目进行改造.大部分的内容官方文档中都说明的比较清楚,这里就不重复讲述了,需要各位花费一些时间照着文档一步步改造项目. 本人一开始也是这样照着文档做的,但是改造到最后…

使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 (默认值:development) 运行命令,在终端输出: 开发环境:npx vue-cli-service inspect --mode development 生产环境:npx vue-cli-service inspect --mode production 运行命令,将输出导入到 js 文…

学习一个Vue模板项目

最开始学习Vue的时候,不建议直接使用模板,而应该自己从头写起.模板都是人写的,要坚信"人能我能".只有自己亲自实践,才能促进自己主动思考,才能对模板.框架有深刻的理解. 在Github上看到一个Vue的项目模板,里面包含许多新的知识.仔细研究,所获甚丰. 新库 ora:用于美观地打印正在执行的步骤,是一个控制台打印小程序 const spinner = ora('building for production...') spinner.start() doSomeThing(args…

【vue】创建一个vue前端项目，编译，发布

npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) [一]mac检查是否安装node.js nvm --version => node -v =>v10.7.0 [二]安装web-pack -g cnpm install…

webpack 打包和手动创建一个vue的项目

首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片.js文件.css文件等)都可以看成模块,最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理.Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的. Gulp侧重于前端开发的整个过程的控制管理(像是流水线),我们可以通过给gulp配置…

安装Vue和创建一个Vue脚手架项目

首先安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本如果都能输出他们的版本号及说明 node 和npm 安装成功然后安装Vue 打开命令行提示工具:输入[npm start] 打开npm 进行Vue安装输入: [npm install --global vue-cli] (-global 意思是全局安装这羊Vue会安装到安装node 的文…

vue/cli项目添加外部js文件的一个方法

有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import Vue from 'vue' import util from './util/Util' Vue.prototype.$util = util 之后就可以在组件中通过this.$util来调用了. 简单方便,为了避免忘记,特此记录一下.哈哈~…

vue cli 项目的提交

前提: 配置git.以及git的ssh key信息假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件在项目目录初始化本地仓库,会创建一个.git目录 git init 将项目所有文件(未被ignore)添加到仓库 git add . 将add文件提交到本地仓库 git commit -m ‘提交信息’ 本地仓库关联远程git仓库 git remote add origin git仓库本地仓库代码提交到服务器 git push -u origi…

Windows10安装node.js，vue.js以及创建第一个vue.js项目

[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目录进行安装3.环境配置4.测试三.前期准备 1.Node.js简介简单的说 Node.js 就是运行在服务端…

Github Actions简单部署一个vue/react项目

大体介绍本文对github actions部署前端项目做一个简单的总结,总体来说,我感觉用它想要部署一个前端项目,可以说非常简单,简单得令人震惊…

vue.cli项目中src目录每个文件夹和文件的用法

assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:…

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, actions…

Vue cli项目开启Gzip

目录安装 compression-webpack-plugin 更改配置文件服务器开启gzip功能安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本可能会报错 cnpm i compression-webpack-plugin@1.1.11 -D 更改配置文件开启生产环境gzip功能. /config/index.js: productionGzip: true, /build/webpack.prod.config.js: webpackC…

vue cli 项目中设置背景图

https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: "url("../../assets/img/bac.jpg")"…

vue cli 3

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service) 一个开发环境依赖,局部安装在每个 @vue/cli 创建的项目中. 可升级 ? 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展.-- cli 插件是用来给 we…

VUE CLI环境搭建文档

VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代码,由于npm官方镜像访问网速问题,我们选择使用淘宝的镜像源 npm config set registry https://registry.npm.taobao.org npm install -g @vue/cli npm install -g @vue/cli-service-global…

vue cli中的env详解

前言相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV ::: tip 注意除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 development.pro…

VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

一.VUE脚手架介绍官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分钟的时间就可以运行起来并带有热重载.保存时 lint 校验,以及生产环境可用的构建版本.更多详情可查阅 Vue CLI 的文档. 个人理解:在实际开发中都是通过脚手架快速搭建一个vue项目,当然也可以使用CDN的方式(具体请看官网) 使用脚手架的好处: 1. 脚手架是通过webpack搭建的开发环境…

利用 vue-cli 构建一个 Vue 项目

一.项目初始构建现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm install -g vue-cli 1 然后,利用 vue-cli 构建一个 Vue 项目: $ vue init <template-name> <project-name> # 例如: $ vue init webpack my-project 1 2 3 4 这行代码其实就是从 Git…

Node.js npm基础安装配置&创建第一个VUE项目

使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一模型的梦想得以实现. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的…