vue-cli创建项目

225 阅读2分钟

1、安装node.js

node -v, npm -v(包管理器,集成在node中)查看版本信息。
显示则安装成功。

2、安装淘宝镜像cnpm

由于npm有些资源被屏蔽或是国外资源访问速度慢等原因导致安装依赖失败,使用国内的淘宝镜像cnpm会更好一些。
npm install -g cnpm --registry=http://registry.npm.taobao.org
安装成功可输入cnpm -v可查看相关信息。

3、安装脚手架

vue-cli2版本创建项目

npm install -g vue-cli
(安装成功可使用vue -V查看版本)

切换到目标目录下
D:   --->    cd test
创建:vue init webpack 项目名称
(项目基于webpack构建工具,生成在指定目录中)
对项目进行配置

1637762323.png

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:作者,如果你有配置git的作者,他会读取。
Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n

vue-cli3及以上版本创建项目

vue create 项目名
创建项目预安装插件配置
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) 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) 测试

vue-cli3拉取vue-cli2

npm install -g @vue/cli-init
安装桥接工具后可使用vue init