Mac – 使用VS Code 创建第一个 Vue 项目

【强烈推荐】将环境配置完成后,请优先考虑使用 VUE GUI 来创建和管理项目,请参考: 使用VUE GUI 来快速创建和管理 VUE 项目

1. 环境配置

Node 与 NPM 的安装请参考: 在 Mac 下安装 Node 与 NPM,接下来我们开始安装 VUE.

1.1 构建大型应用时推荐使用 NPM 安装

npm install vue

# 对于中国大陆来说,建议使用淘宝的 cnpm 可以大幅度提升安装速度。
# 使用默认的 cnpm 命令号工具来替代默认的 npm. 使用方式完全一样
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue

1.2 使用官方命令行工具,用于快速搭建大型单页应用

【注】程序包名称从 vue-cli 更改为 @vue/cli。如果 vue-cli 已全局安装了先前的(1.x或2.x)软件包,则需要先使用cnpm uninstall vue-cli -g 或卸载它。然后使用以下命令进行安装:

cnpm install -g @vue/cli
#检查版本是否准确:
vue -V 
# 或者
vue --version

【强烈推荐】将环境配置完成后,请优先考虑使用 VUE GUI 来创建和管理项目,请参考: 使用VUE GUI 来快速创建和管理 VUE 项目

2. 使用 VS Code 创建项目

1. 用 VS Code 打开一个文件夹(自己电脑上的项目路径)

2. 按住 control + ` ( ` 为 Tab 上面的键 ) 打开命令行(也用它来关闭),默认为当前路径。

3. 使用命令创建一个新项目

vue create hello-word # hello-word 为项目名称

【注】如果使用淘宝的 NPM 源的话,会有个提示,会直接输入 Y 或 y 同意即可。

接下来系统将提示您选择一个预设,直接回车(选择默认)即可,默认设置非常适合快速制作新项目的原型,而手动设置提供了更多面向生产的项目可能需要的更多选项。

新建项目完成,显示如下:

4. 运行项目

cd hello-word
npm run serve
# OR
cnpm run serve

【注】注意下面的提示 (部署到正式环境时需要用到):

– Note that the development build is not optimized. To create a production build, run npm run build.

– 注意,开发构建没有优化。要创建产品构建,请运行 npm run build

将 VUE 部署到服务器正式环境的时候,通过 npm run build 会打包生成静态文件,并放在根目录的 dist 目录;该目录里面有个 index.html,在服务器部署完成后,通过指定的网址就可以访问我们自己的项目了。

5. 点击显示的地址,打开项目

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注