注:贴子是复制粘贴的,只是防止找不到帖子,原文章:https://learner.blog.csdn.net/article/details/88926242
一、安装 Vue CLI
因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。
图中左边是长期支持版本,右边是当前版本,下载哪个都行,我一般选择长期支持版本。
下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入 node -v
,检查是否安装成功。
如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入 npm -v
查看版本号
输入 npm -g install npm
,将 npm 更新至最新版本。
之后可以选择安装 cnpm,即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。
安装 cnpm 的命令为 :
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后就可以使用 cnpm
替代 npm
了,我不太喜欢用 cnpm
,喜欢用的小伙伴注意一点,cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,不要中途敲错命令,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行 npm/cnpm install
就行了,只是比较浪费时间。
之后,使用 npm install -g vue-cli
安装脚手架。
注意此种方式安装的是 2.x 版本的 Vue CLI,最新版本需要通过 npm install -g @vue/cli
安装。新版本可以使用图形化界面初始化项目,并加入了项目健康监控的内容,但使用新版本创建的项目依赖与这个教程不太相符,折腾起来比较麻烦。
虽然我也想专门针对新的 CLI 和 Vue 3.0 重构一下教程,但想了想这是个无休止的工作,这个教程也不是为了讲前端框架的新特性,而且直到现在 Vue 3.0 也只是发布了初期试验版本,想必又是一堆依赖问题,所以就不折腾了。
二、构建前端项目
1.通用方法
直接使用命令行构建项目。首先,进入到我们的工作文件夹中,我在 D 盘新建了一个叫 workspace 的文件夹,大家可以自行选择位置。
然后执行命令 vue init webpack wj-vue
,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 wj-vue 是我们的项目名称(White Jotter),大家也可以起别的名字。
在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改,比如下图问我项目名称是不是 wj-vue,直接回车确认就行。
这里还会问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是我们构建单页面应用的关键。
还有是否使用 es-lint,这玩意儿挺烦的,但为了代码质量先将就一下吧。
接下来等待项目构建完成就 OK 了。
可以看到 workspace 目录下生成了项目文件夹 wj-vue,里面的结构如图
接下来,进入到我们的项目文件夹里(cd D:\workspace\wj-vue
),执行npm run dev
项目构建成功,这一步如果报错,可能是未能加载项目所需的依赖包,即 node_modules 里的内容,需要在该文件夹执行 npm install
,再执行 npm run dev
访问 http://localhost:8080,查看网页 demo,大工告成!
2.使用 IDE (IntelliJ IDEA)
对于习惯使用 IDE 的同学,可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例,点击 Create New Project
然后选择 Static Web -> Vue.js,点击 next,输入相关参数
此处可以选择 CLI 的版本
这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next,等待 Vue CLI 初始化,然后在可视化界面上确认项目信息,修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的,所以要先调出终端,执行 npm install
运行完成后,输入 npm run dev
即可。
另外 IDE 嘛,总是在 UI 上下了很多功夫,我们还可以在 package.json 文件上点击右键,选择 show npm scripts
然后就会出来 npm 命令窗口,想要执行哪个命令直接双击运行就可以了。
这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的,start 即是执行 npm run dev
命令
另外使用这种方法,可以激活 IDE 右上角的按钮,不过这些都不重要了。