Vue CLI

vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。 https://cli.vuejs.org/zh/guide/mode-and-env.html 1、首先明确： 通过为 .env 文件增加后缀来设置某个模式下特有的环境变量 通过传递 --mode 选项参数为命令行覆写默认的模式 2、创建文件： (一定是根目录！！！！！！！！！！！！！！！！！！！！！！！！！！) 在项目的根目录新建4个文件夹，分别对应开发（dev），测试（test），仿真（uat），生产（prod） 文件命名： .env.dev , .env.test , .env.uat , .env.prod 3、配置每个文件的环境 .env.dev NODE_ENV='development' VUE_APP_CURRENTMODE='dev' VUE_APP_BASEURL='你的开发环境地址' .env.test NODE_ENV='production' VUE_APP_CURRENTMODE='test' VUE_APP_BASEURL='你的测试环境地址' .env.uat NODE_ENV='production' VUE_APP_CURRENTMODE='uat' VUE_APP_BASEURL='你的仿真环境地址' .env.prod NODE

vue-cli 2.0创建步骤 PS D:\Web前端\vue项目\Clistudy> vue init webpack vue-cli-2.0 ? Project name vue-cli-2.0-study ? Project description vue cli 2.0 study-vue.js ? Author Keven Li ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli 3.0创建步骤 PS D:\Web前端\vue项目\Clistudy> vue create vue-cli-3.0 Vue CLI v4.2.2 ? Please pick a preset: Manually select features ? Check the features needed

一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI ： @vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务 ： @vue/cli-service 是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如： serve 、 build 和 inspect 命令） CLI 插件 ：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等） 二、安装 1、全局安装过旧版本的 vue-cli (1.x 或 2.x)要先卸载它，否则跳过此步： 1 npm uninstall vue-cli -g // 或 yarn global remove vue-cli 　 2、Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0）。 下载安装nodeJs， 中文官方 下载地址： http://nodejs.cn/download/ 3、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli ） 1 cnpm install -g @vue/cli //yarn global

1. node http://nodejs.cn/download/，自带npm包管理工具 2. git： https://git-scm.com/downloads，管理源代码工具 3. cnpm 安装命令：npm i cnpm -g（cnpm自己的命令：cnpm install packname -g，cnpm uninstall packname -g） 4. yarn 安装命令：npm i yarn -g（yarn自己的命令：yarn add packname -g，yarn remove packname -g，yarn global add packname，yarn global remove packname） 5. nrm 安装命令：npm i nrm -g（nrm自己的命令：nrm -lst， nrm use 'xx'） 6. webpack 安装命令：npm i webpack webpack-cli -g，npm i webpack webpack-cli -D，npm install webpack-dev-server -g npm init -y（webpack的项目创建方式） 7. vue-cli npm i @vue/cli -g npm i @vue/cli-service-global -g npm install @vue/cli-init

配置router文件 新建一个文件夹router，再在新建的router文件夹里新建一个index.js文件 index.js import Vue from 'vue' import Router from 'vue-router' import Home from '../components/HelloWorld.vue' Vue.use(Router) export default new Router({ routes:[{ path:'/', component:HelloWorld }] }) 同时，配置main.js文件 main.js import Vue from 'vue' import App from './App.vue' import router from "vue-router" Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') 来源： oschina 链接： https://my.oschina.net/u/4327137/blog/3167755

近几年，前端技术能力的值钱程度很突出，名列前茅。这正代表了前端技术的当前行情。前端工程师一般分为初级工程师、中级工程师、高级工程师、架构师或技术经理角色。不同级别的web前端工程师都应该掌握哪些知识呢 初级前端工程师： 能熟练使用html、css、js 主要工作还是搭建静态页面，主要工作可能是给一些工作做企业官网居多（个人猜测）。进阶的知识的话就是响应式这一块了，一套代码能适配pc+手机是初级前端工程师的进阶。 专门建立的学习Q-q-u-n ⑦③①-⑦⑦①-②①① 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 中级前端工程师： 作为一名中级前端工程师的话，除了上面的以外，还需要会使用一些框架之类的东西，像bootstrap、jquery之类的。进阶的知识应该是ajax这一块了，当然ajax并不难，了解怎么与后台交互是学习ajax的关键点。 主抓基础，避免盲目，花了太多时间学习那些不是特别需要的东西上。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍在原地踏步。 高级前端工程师： 想成为高级前端工程师？首先要学习的就是前端工程化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> Vue-cli 安装： npm install -g @vue/cli 创建项目： vue create my-project 本地预览： npm run serve # 或者 vue-cli-service serve 打包： npm run build # 或者 vue-cli-service build 发布： #安装静态服务器 npm install -g serve #发布 serve -s dist 来源： oschina 链接： https://my.oschina.net/u/2286010/blog/3154945

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1、安装压缩插件 npm install compression-webpack-plugin --save-dev 2、在vue.config.js文件中使用： configureWebpack: { plugins: [ new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + ['js','css'].join('|') + ')$'),//匹配文件名 threshold: 10240,//对10K以上的数据进行压缩 minRatio: 0.8, deleteOriginalAssets:false,//是否删除源文件 }) ] } 来源： oschina 链接： https://my.oschina.net/bing309/blog/3154694

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> Vue-cli Vue脚手架的基本用法，vue脚手架用于快速生成vue项目基础架构： 地址： https://cli.vuejs.org/zh/ 使用方式，安装3.x版本的vue脚手架 npm install -g @vue/cli 功能丰富 对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。 易于扩展 它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。 无需 Eject Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。 CLI 之上的图形化界面 通过配套的图形化界面创建、开发和管理你的项目。 即刻创建原型 用单个 Vue 文件即刻实践新的灵感。 面向未来 为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。 基于交互式命令行的方式，创建vue项目 vue create my-project 基于图形化界面的方式，创建vue项目 vue ui 基于2.x的方式，创建vue项目 npm install -g @vue/cli-init vue init webpack my-project npm run serve

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1、node和vue-cli的安装和创建项目 今天参考网上的教程搭建vue成功了，这里记录一下方便以后使用 1、安装node.js的环境 官网下载 https://nodejs.org/zh-cn/ 网上都推荐下载这个 下载完成之后一路next就行 安装完成后输入 node -v npm -v 出现版本为安装成功 node版本最好高一点，保险的话直接安装最新版本的，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了有可能会出错，而npm是随node的安装自动安装的，直接安装最新的node，npm的版本号也会变高的，不用再做更多的操作，当然，也可以手动升级npm版本号 如果安装过可以使用 npm uninstall vue-cli -g 卸载 升级npm：npm install -g npm 卸载成功。。。 2、安装vue -cli 安装淘宝镜像，不然引入下载的时候超级慢 npm install cnpm -g --registry=https://registry.npm.taobao.org 安装成功 cnpm -v 查看版本 安装全局cli gnauhzn cnpm install -g vue-cli 安装成功 查看版本 vue -V V大写 如果提示“无法识别 ‘vue’ ”