【强烈推荐】将环境配置完成后,请优先考虑使用 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. 点击显示的地址,打开项目