关于vue-cli以前我总是不太理解,直到上手项目用了"几次"这才赶紧写下来留个记录,还有不足的地方请大家勿喷 哈哈哈!!!
Vue CLI
* CLI是command-Line Interface,翻译为命令行界面,但是俗称脚手架
* 使用Vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
* Vue-cli是官方发布的vue.js项目脚手架
使用Vue CLI使用前提-Node 安装nodeJS
* 可以直接在官方网站中下载安装
* 网址:http://nodejs.cn/download/
* 请移步到这里额 node.js
检测安装的版本
* 默认情况下自动安装Node和Npm
* Node环境要求8.9以上或者更高版本
* node-v(v10.5.0)-------- npm-v(6.1.0)
什么是NPM
* NPM的全称是Node Package Manager
* 是一个NodeJs包管理和分发工具,已经成为了非官方发布的Node模块(包)的标准
* 以后会经常使用NPM来安装一些依赖包
cnpm安装
* 由于国内直接使用npm的官方镜像是非常慢的,这里就推荐使用NPM镜像
* 也可以使用淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的cnpm
* npm install -g cnpm --registry=https://registry.npm.taobao.org
* 这样就可以使用cnpm命令来安装模块了 cnpm install 【name】
Vue Cli 使用前提 - webpack vue.js官方脚手架工具就使用了webpack模板
* 对所有的资源会压缩等优化操作
* 它在开发过程中提供已完整的功能,
Webpack的全局安装
* npm install webpack -g
vue cli3的使用 (安装vue3脚手架)-g(global全局)
* npm install -g @vue/cli (安装vue cli 3 (3.0.4))想要安装3以上的版本必须先把旧的版本先卸载再去重新安装
Vue Cli3初始化项目
* vue create my-project(项目名称)
安装vue cli 2 拉取2.x
* npm install -g @vue/cli-init
Vue Cli2初始化项目
* vue init webpack my-project(项目名称)
* ? Project name (vuecli2test)(直接敲回车,默认使用此名称)
* ? Project description (A vue. js project)(重新写个描述 test vue cli2)
* ? Author (codeerYJ 《在gitconfigjs配置过得自己的信息》项目的作者)
* vue bulid (Use arrow keys)(用哪一个来构建项目)
* Runtime + Complier: recommended for most users(大多数用户使用的,新手首选)
* Runtime + only: about 6kb lighter min+gzip(优点1 打包的文件位置很小,运行的效率高,代码量更少)
* ?install vue-router?(y/n)(是否要安装路由) vue全家桶:(vueCore+vue-router+vueX)
* ?Use ESLint to lint your code?(y/n)(是否安装Eslint检测语法)
* ?Pick an ESlint preset (use arrow keys)(请选择一种规范)
* standard (http:// github.com/standard/standard)(标准的规范)
* Airbnb(http:// github.com/Airbnb/javascript)(爱彼迎的规范)
* none (configure it yourself)(配置自己的规范)
* ?Set up unit tests (y/n)(单元测试)
* ?Setup e2e tests with Nightwatch?(y/n) (e2e:端到端的测试)(依赖Nightwatch结合 selenlum形成的自动化测试)
* ?should we run `npm install` for you after the project haas been created? (recommended) (管理项目,要使用npm还是yarn)
* yes, use NPM (一般使用npm)
* yes, use Yarn
箭头函数var f=v => vvar f=function(v){return v}this.chardata.(map)function(item){return item.name} 安装vue cli始终安装不成功(node卸载也不可) 解决方法:找到c盘中的user下的adminstrator找到appdata下的roaming找到以n开头的npm-cache删除此文件 main.js中 dependencies是运行时依赖 devDependcies是开发时依赖如何关闭ESlint检测 在config文件夹下找到index.js下的useESlint将其改为falseVue cli3 的更新
* 没有了build和config的代码
* vue-cli3是基于 文本pack打造的 vue-cli还是webpack3
* 移除了static文件夹,新增了public文件夹,并且index.html移动到public
* vue-cli3提供了vue ui命令,提供了可视化配置,更加人性化
安装 Vue cli4
* vue creat 项目名称
* ?please pick a preset:(use arrow keys (preset:配置))
default (babel,eslint) Manually select features(manually(手动)feature(特性))
* Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection):按空格来进行选择或者取消
()Babel 星号表示选中()TypeScript 星号表示选中()progressive Web APP (PWA) Support 星号表示选中(progressive:先进的)()Router星号表示选中()vuex星号表示选中()CSS pre - processors 星号表示选中()Linter / Formatter 星号表示选中()Unit Testing 星号表示选中()E2E Testing 星号表示未选中
* Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)(你是准备把这些文件单独放到一个文件中还是选择放到package.json)
In dedicated config files(放到独立的配置文件中) In package.json(或者放进package.json配置中)
* Save this as a preset for future projects? (y/N)(future:将来)(是否将此保存为将来的目的预设?)
* Save preset as: ‘要保存的名字’(你准备保存什么名字)
* Pick the package manager to use when installing dependencies: (Use arrow keys)
Use Yarn (选择Yarn来运行) Use NPM (选择npm来运行)vuecli4和vuecli3的区别 vuecli3有postcss.config.js vuecli4没有postcss.config.js
vuecli4配置去哪里了?
1 通过vue ui来修改配置,添加插件或者依赖,以及能在图形化上面运行程序
2 想要看安装最正确的vue文件版本:1. 再nodemodules中找到vue下的types中的 package.json中的 ‘id’:‘vue@^2.6.12’版本为准或者打包后的dist中的 vue.j
3 如果想要修改配置,直接再这个文件内新建vue.config.js(严格按照这样命名) 在文件中写上
module.exports = {
}
其实还有另外一种创建的方式 就是图形化界面创建,因为自己不常用就没有再去做详细的赘述了,不喜勿喷额😜