从零开始搭建vue-cli项目

129 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

安装node.js环境

下载地址为:(nodejs.org/en/)

查看是否安装成功

node -v
npm -v

有版本号的就说明安装成功了

image.png

为了提高我们的速度可以下载淘宝镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org

注意安装了淘宝镜像npm命令要改成cnpm

然后全局安装vue-cli

cnpm install -g vue-cli

查看vue版本号
注意这里的V是大写的

vue -V

image.png

接下来开始创建vue-cli 注意hello-vue是项目名称

vue create hello-vue

通过↑ ↓ 箭头选择配置

“sc”和“sa”是预设名

default vue3:是默认配置3.x

default vue2:是默认配置2.x

Manually select features:自定义配置

这里选“Manually select features”自定义配置

image.png

通过↑ ↓ 箭头选择你需要的配置 这里空格是选中,a是全选,i是反选 image.png

Babel :转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

TypeScript: TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了

Progressive Web App (PWA) Support: 渐进式Web应用程序

Router :vue-router(vue路由)

Vuex : vuexvue的状态管理模式

CSS Pre-processors :CSS 预处理器(如:less、sass)

Linter / Formatter :代码风格检查和格式化(如:ESlint)

Unit Testing :单元测试(unit tests)

E2E Testing : e2e(end to end) 测试

选脚手架版本

image.png

路由器是否使用历史记录模式?y是n否 image.png

您希望将Babel、ESLint等的配置放在哪里。?

In dedicated config files :在专用配置文件中

In package.json:在package.json image.png

是否将此保存为将来项目的预设?y是n否

image.png

将预设另存为:

image.png

创建成功

image.png

接下来启动项目

cd到项目目录

cd hello-vue

启动项目

npm run serve

image.png

复制网址到浏览器打开

image.png

vue-cli项目就创建好了

新手有哪里讲得不够好的请多多指教