Vue项目的创建
1.安装 node.js
从官网下载、安装就行,安装完成后,执行:
node -v
若出现对应的版本号,则说明安装成功
npm 包管理器,是集成在 node 中的,所以直接输入 npm -v 就会显示出 npm 的版本信息
2.安装 cnpm
由于有些 npm 有些资源被屏蔽或者是国外资源的原因,经常会导致用 npm 安装依赖包的时候失败,所以还需要 npm 的国内镜像 -cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org
3.安装 vue-cli 脚手架构建工具
npm install -g vue-cli
通过以上三步,需要准备的环境和工具都准备好了,接下来开始使用 vue-cli 来构建项目
4.用 vue-cli 构建项目
在 workspace 中进行(不建议在桌面
- 初始化一个项目:
vue init webpack firstvue
- 其中 webpack 是构建工具(整个项目是基于 webpack 的
(1)? Project name (firstvue):项目名称(均小写)
(2)? Project description (A Vue.js project):项目描述
(3)? Author () :项目作者
(4)? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6 KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files - render functions are required elsewhere
直接回车
(5)? Install vue-router? (Y/n) y 是否使用vue-router,这里根据需求选择
(6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint,这里根据需求选择
(7)? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)
直接回车
(8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试,这里根据需求选择
(9)Setup e2e tests with Nightwatch? (Y/n) n 是否需要单元测试,这里根据需求选择
(10) Should we runnpm install
for you after the project has been created? (recommended) (Use arrow keys)
❯ No,I will handle that myself
创建项目后需要安装项目所需要的依赖,这里选择 no,本步骤作为步骤6说明
5.安装项目所需的依赖
- 安装依赖包,首先 cd 到项目文件夹(firstvue文件夹),然后运行命令
npm install
,等待安装 - 安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源
注:我在实际中其实是前面选择no不安装依赖,也是会有node_modules的,只是和yes安装的文件夹大小不一样
6.运行项目
npm run dev
,以热加载方式运行(在修改完代码后自动刷新浏览器,实时看到修改后的效果- “run” 对应的是 package.json 文件中,scripts 字段中的 dev,也就是 node build/dev-server.js 命令的一个快捷方式
运行结果,浏览器打开如图:
表示项目创建成功!!
vue init webpack 、 vue create 创建项目产生的项目文件区别说明
项目目录结构:
vue init webpack myvue | vue create myvue |
---|---|
build及config:webpack文件、开发环境配置相关 | node_modules:通过npm install 安装的依赖代码库 |
node_modules:依赖库 | public:部署到生产环境的目录 |
src:项目源码 | src:源码 |
static:存放静态资源 | .gitignore:git忽略里面设定的这些文件的提交 |
.babelrc:babel 相关配置(因为我们的代码大多都是 ES6,而大多浏览器是不支持 ES6 的,所以我们需要 babel 帮我们转换成 ES5 语法) | babel.config.js::babel转码配置 |
.editorconfig:编辑器的配置,可以在这里修改编码、缩进等 | package.json:项目的配置文件,用于描述一个项目,包括我们init时的设置、开发环境、生成环境的。依赖插件及版本等。 |
.eslintignore:设置忽略语法检查的目录文件 | |
.eslintrc.js:eslint 的配置文件 | |
.gitignore:git 忽略里面设定的这些文件的提交 | |
index.html:入口 html 文件 | |
package.json:项目的配置文件,用于描述一个项目,包括我们 init 时的设置、开发环境、生成环境的依赖插件及版本等。 | |
package-lock.json:普通 package.json 文件“^2.0”这样写的,意味着版本可以大于等于2.0,如此就会出现各种错误。 |
总结
- vue init 是 vue-cli2.x 的初始化方式,可以使用github上面的一些模板来初始化项目,webpack 是官方推荐的标准模板名
- vue create 是 vue-cli3.x 的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是 vue-cli3 的项度目,与 vue-cli2 项目结构不同,配置方法不同,具体配置方法参考官方文档网页
- vue-cli2.x 项目向专 3.x 迁移只需要把 static 目录复制到 public 目录下,老项目的 src目录覆盖 3.x 的 src 目录(如果修改了配置,可以查看文档,用 cli3 的方法进行属配置)