Vue创建项目详解
1、前提第一步:安装node.js什么是nodejs? 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境;Node.js使用一个事件驱动、非阻塞式 I/O 的模型,使其轻量且高效;Node.js的软件包生态系统npm是全球最大的开源库生态系统。为什么要安装nodejs?安装vue需要使用npm,
1、前提
第一步:安装node.js
什么是nodejs? 简单的说 Node.js 就是运行在服务端的 JavaScript。
- Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境;
- Node.js使用一个事件驱动、非阻塞式 I/O 的模型,使其轻量且高效;
- Node.js的软件包生态系统npm是全球最大的开源库生态系统。
为什么要安装nodejs?
安装vue需要使用npm,而npm依赖于node.js(当然,安装vue也可以使用其他方法,但是都不如npm简单实用);另外node还可以帮助vue做到:打包部署(webpack),解析vue单文件组件,解析每个vue模块,拼在一起,转码es6,less等,启动测试服务器localhost8080, 帮你管理 vue-router,vue-resource这些插件等等。
好了不多说了,具体安装node.js可以参考:Node.js安装详细步骤教程(Windows版)
第二步:安装全局vue-cli
使用npm安装vue,其中g是global,全局的意思。
npm install vue-cli -g
如果速度慢,有两种方法可以改善:
- 方法一:可以先安装cnpm(淘宝镜像),然后再使用cnpm安装vue:
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用cnpm安装vue-cli
cnpm install vue-cli -g
- 方法二:可以更改npm下载源:
#下载时指定源
npm --registry=https://registry.npm.taobao.org install
# 配置源为淘宝仓库
npm config set registry https://registry.npm.taobao.org
如果已经安装了旧版本,想要安装新版本,需要先卸载旧版本才能安装新版,卸载命令:
npm uninstall vue-cli -g
为什么要全局安装?
没有全局安装vue-cli,在项目里配置 了vue.config.js,这个配置是不起作用的。直接运行npm run dev,会默认调起服务,端口号是8080;而全局安装了vue-cli,则能使用上vue.config.js。
2、第一种方式:通过vue create命令
在你要创建项目的目录下,打开cmd,输入如下命令,开始创建hello-world项目:
vue create hello-world
提示你使用npm创建似乎比较慢,是否使用cnpm更快地创建(这个要先按照上面安装好cnpm才有这个提示),我选择是。
三种创建方式:
- 默认套餐,vue2版本,提供babel和eslint支持。
- 默认套餐,vue2版本,提供babel和eslint支持。
- 自定义创建,自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript ,就应该选择这一项。
我选择第三项,自定义(通过上下键来选择)。
如果选择前两项,只需要静静等待 vue 初始化项目即可。
vue-cli 内置支持了8个功能特性,可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。
对于每一项的功能,此处做个简单描述:
- Choose Vue version:选择版本
- Babel:支持es6 转 es5
- TypeScript:支持使用 TypeScript 书写源码。
- Progressive Web App (PWA) Support:PWA 支持。
- Router:支持 vue-router 。
- Vuex:支持 vuex 。
- CSS Pre-processors:支持 CSS 预处理器。
- Linter / Formatter:支持代码风格检查和格式化。
- Unit Testing:支持单元测试。
- E2E Testing:支持 E2E 测试。
注意:后面的配置选项会根据你这里的选择不同而略有不同。
根据自己的需要进行配置,我的选择如下:
点击回车,进行下一项:
选择vue版本,这里选择vue3版本。
接下来会出现如下图所示,一系列创建选项让你选择:
- 选择vue版本
- 这里是让选择在开发 Vue 组件时,要不要使用 class 风格的写法。为了更方便地使用 TypeScript ,此处选择 Y
- 要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills ,选择Y
- 是否使用路由的history模式,选择Y
- 在项目里面需要支持何种动态样式语言,选择LESS
- 选择哪种代码校验方式,这里选择 ESLint + Standard config(严格模式)
- 选择何时进行代码校验,两种都选择:每当保存文件和当执行 git commit 提交的时候
- 选择单元测试工具,直接选择现在比较火的 Jest
- 这一步就是要选择配置文件的位置了,选择In dedicated config files
- 要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用,我选择N
OK,静静等待初始化完成即可。
完成后,就可以看到项目根目录下多出一个hello-world项目。
3、第二种方式:通过vue-cli脚手架创建
使用vue初始化基于webpack的新项目:
vue init webpack my-project
如果执行出现问题:
如上图所示,按照提示执行”npm i -g @Vue/cli-init“即可,执行创建命令后,接下来要输入一系列创建选项:
- Project name—项目名称,直接回车;
- Project description—项目描述,输入“Vue项目测试”,点击回车;
- Author—作者,输入“aizai846”,点击回车;
- Runtime + Compiler: recommended for most users和Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere两个选项—第一个是运行加编译,推荐使用,第二个仅运行时。通过键盘上下按钮选择后,点击回车;
- Install vue-router?<Y/n>—是否安装vue路由插件,输入“Y”,点击回车;
- Use ESLint to lint your code? <Y/n>—是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用,但作为初学者,建议不进行安装,输入“n”,点击回车;
- Set up unit tests<Y/n>—是否安装单元测试,这里输入“n”,点击回车;
- Setup e2e tests with Nightwatch?<Y/n>?—是否安装e2e测试,这里输入“n”,点击回车;
- Should we run “npm install” for you after the project has been created?
整个执行结果图片如下:
OK,接下来要自己安装一些依赖包:
# 进入项目根目录
cd my-progect
# 使用cnpm安装
cnpm i
OK,等待安装结束,项目已经初始化完毕。
4、第三种方式:使用vue ui命令(推荐)
在创建项目的目录打开cmd,运行如下命令:
vue ui
运行后,会自动打开浏览器,出现如下界面:
选择创建,然后点击创建新项目:
填写项目名称,去掉git覆盖选项:
选择手动配置:
这个和前两种方法一致选择自己想要的属性,下面是我的选择:
选择vue版本,这里选择3版本:
是否将配置项保存,不选择直接创建项目:
一套流程走下来,其实本质和上面两种方法内容是一致的,只不过是方法不同而已。
OK,创建完成后,会生成对应的项目仪表盘:
在仪表盘中,都可以手动添加依赖、插件,手动启动项目等等,非常方便。
5、启动项目
启动项目:
# 进入项目目录
cd hello-world
# 运行项目
npm run serve
仪表盘运行:
启动后,打开网址:http://localhost:8080/,生成页面:
6、项目打包
在开发完项目之后,就应该打包上线了。 vue-cli 也提供了打包的命令,在项目根目录下执行:
npm run build
执行完之后,可以看到在项目根目录下多出了一个 dist 目录,该目录下就是打包好的所有静态资源,直接部署到静态资源服务器就好了。
实际上,在部署的时候要注意,假设静态服务器的域名是 http://static.baidu.com ,那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ,其他的静态资源以此类推。
7、单元测试
执行命令:
npm run test
更多推荐
所有评论(0)