Node.js环境下Vue CLI全局安装与项目初始化指南

Node.js环境下Vue CLI全局安装与项目初始化指南

前置条件：本地环境已部署 Node.js。

1、运行命令 npm install --global vue-cli 以全局安装 vue-cli。

----鉴于默认源为国外服务器，可切换至阿里巴巴国内镜像源。

通过 config 命令配置默认下载路径：

npm config set registry https://registry.npm.taobao.org 

随后执行：

npm install --global vue-cli

2、安装完毕后，验证安装状态。

执行 vue -V（注意 V 需大写）。

3、利用 vue 创建名为“my-project”的项目（命令：vue init webpack my-project），注意项目名称严禁包含大写字母。

----注：vue-cli 提供的模板涵盖 webpack 与 webpack-simple，前者适用于复杂专业项目，其配置分散于根目录的 webpack.config.js 中。

----webpack-simple 模板较为简易，其根目录下仅包含 webpack.config.js。

4、注意事项：

项目构建过程中涉及多项选择，请一律选择 NO。（此选项用于启用 ESLint 代码规范检查，任何空格错误均会报错，建议关闭以规避不必要的麻烦）。

后续两项涉及单元测试，可选 No。

5、项目构建完成后，目录结构如下：

6、安装项目依赖，进入项目目录：

npm install

完成后，项目目录下将新增 node_modules 文件夹，内含由 vue-cli 基于 webpack 创建的 vue.js 项目文件。

7、进入项目目录文件夹（my-project），即可开始 vue 开发。

8、执行 npm run dev 以启动本地服务器并实时预览效果（访问地址：localhost:8080）。

若浏览器打开后页面未加载，可能是本地 8080 端口被占用，需修改配置文件 config>index.js。

建议将端口号更改为不常用端口。此外，我将 build 路径前缀修改为 ' ./ '（原值为 ' / '），原因是打包后引入 js 和 css 文件时，若路径以 ' / ' 开头，在本地环境中无法定位对应文件（服务器端无此问题）。因此，若需在本地打开打包后的文件，必须修改文件路径。

9、初始效果展示

10、退出监听状态，可直接按 Ctrl+C 并选择 Y。

以上为本文全部内容，希望有助于大家的学习，也欢迎大家多多支持本站。