手把手教你创建vue cli3.0项目
1、全局安装@vue-cli:npm insall -g @vue/cli如果安装了淘宝镜像,建议使用cnpm下载。安装成功后,可以通过 vue -V 查看下载的@vue/cli版本号。2、创建项目vue create myProject
前言:本篇默认已安装node.js,如果没有安装请先安装(node.js下载地址)。
如果之前安装了vue-cli(1.x或者2.x版本),需要先卸载:
npm uninstall vue-cli -g
好了,正式开始:
1、全局安装@vue/cli:
npm install -g @vue/cli
如果安装了淘宝镜像,建议使用cnpm下载。
安装成功后,可以通过 vue -V 查看下载的@vue/cli版本号。
2、创建项目(注意:不要使用驼峰式命名,不支持。)
vue create <project name>
之后,会开始进行一系列的配置选择,具体操作如下:
首先,会提示你选择一个预设(preset):
1、第一个选项是你之前保存的预设配置(比如图中的“createProgram”是我之前创建的预设);
2、default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包;
3、Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包。
一般我选择最后一个选项,可以根据自己的需求添加配置项:
根据图中的配置项手动选择(上下是切换配置项,选中是enter键)
(*) Choose Vue version // 选择vue版本(2.x还是3.x)
(*) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行。
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
(*) Router // vue-router(vue路由)
(*) Vuex // vuex(vue的状态管理模式)
(*) CSS Pre-processors // CSS 预处理器(如:less、sass)
(*) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
选择完后enter,然后会提示你选择对应配置项的工具包,选择自己熟悉的或者使用广泛的即可。
接下来具体看选中的配置项:
1、选择vue版本,这里我选择的是vue2.x版本,3.x版本更改较多,如果对3.x版本语法不熟悉的请谨慎选择。
2、选择路由模式:(路由是否使用history模式?根据自己需求选择Y或者N,我这里选择Y,直接enter)
3、选择css预编译处理器:(对哪种预编译处理器更加熟悉就选哪种,不做限制)
4、Eslint检查:(提供一个插件化的javascript代码检测工具,我这里默认选择第一个选项)
5、选择什么时候作代码校验,我这里选择保存时候就检查。
6、把配置项放到独立文件中还是放到package.json中,根据个人喜好来,我选择放到package.json中。
7、是否保存此次的配置项,我这里选择不保存。
选择好后,vue就根据配置项创建项目,创建成功后,会显示如下内容:
执行这两个命令行,项目就能成功运行起来了。
浏览器输入:localhost:8080 即可成功展示vue项目页面。
更多推荐
所有评论(0)