Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程

目录

前言提示

[一、安装 & 配置 nodejs](#一、安装 & 配置 nodejs)

[1.1、安装 nodejs](#1.1、安装 nodejs)

1.2、配置必要目录

1.3、配置环境变量

[1.4、测试 安装&配置 是否成功](#1.4、测试 安装&配置 是否成功)

1.5、安装淘宝镜像

[1.5、cnpm 安装(推荐安装)](#1.5、cnpm 安装(推荐安装))

[二、vue-cli3 创建项目](#二、vue-cli3 创建项目)

[2.1、vue-cli2 和 vue-cli3 主要区别](#2.1、vue-cli2 和 vue-cli3 主要区别)

[2.2、安装 vue-cli3](#2.2、安装 vue-cli3)

[2.3、创建 vue-cli3 脚手架](#2.3、创建 vue-cli3 脚手架)

2.4、启动项目


前言提示


以下过程凡是涉及到终端的使用,一定都要使用 管理员 方式打开!

一、安装 & 配置 nodejs


1.1、安装 nodejs

官网下载地址:Node.js --- Download (nodejs.org)

1.2、配置必要目录

以管理员的身份打开终端,输入如下两个命令(文件目录就是刚刚创建的两个文件目录):

npm config set prefix "D:\compiler\nodejs\node_global"

npm config set cache "D:\compiler\nodejs\node_cache"

Ps:注意和命令的对应关系 prefix -> node_global 、 cache -> node_cache

1.3、配置环境变量

变量名:NODE_PATH

变量值:D:\compiler\nodejs\node_global\node_modules

将默认的 C 盘下 AppData\Roaming\npm 修改成 node_global 的路径,点击确定

1.4、测试 安装&配置 是否成功

全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

1.5、安装淘宝镜像

npm 默认使用国外镜像,下载速度比较慢. 可以通过配置 淘宝 镜像来解决.

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

检查是否配置成功

npm config get registry

1.5、cnpm 安装(推荐安装)

cnpm是个中国版的npm,是淘宝定制的.

如果将来使用 npm install 下载速度慢,就可以使用 cnpm install 来代替.

以下是下载 cnpm 指令:

npm install -g cnpm --registry=https://registry.npmmirror.com

查看是否安装成功:

cnpm -v

二、vue-cli3 创建项目


2.1、vue-cli2 和 vue-cli3 主要区别

cli2个性化强一些,可以更友好的配置webpack.

cli3通用性强一些,达到真正的开箱即用,几乎零配置,已经将最适合开发的配置打包封装,并且支持 ui 界面创建项目.

当然cli3也提供了定制化功能。个人建议尽量使用cli3,毕竟是新项目用最新,最前沿技术.

vue-cli2 项目目录如下:

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件,比如一些图片,json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

vue-cli3 项目目录如下:

|-- src                            // 源码目录
|  |-- components                  // vue公共组件
|  |-- router                      // vue的路由管理
|  |-- App.vue                     // 页面入口文件
|  |-- main.js                     // 程序入口文件,加载各种公共组件
|-- public                         // 静态文件,比如一些图片,json数据等
|  |-- favicon.ico                 // 图标文件
|  |-- index.html                  // 入口页面
|-- vue.config.js                  // 是一个可选的配置文件,包含了大部分的vue项目配置
|-- .babelrc                       // ES6语法编译配置
|-- .editorconfig                  // 定义代码格式
|-- .gitignore                     // git上传需要忽略的文件格式
|-- .postcsssrc                    // postcss配置文件
|-- README.md                      // 项目说明
|-- package.json                  // 项目基本信息,包依赖信息等

2.2、安装 vue-cli3

a)安装 vue-cli3 命令如下

npm install -g @vue/cli

b)打开 C:\Users\陈亦康\.vuerc 文件,保证 useTaobaoRegistry 的值为 true.(使用淘宝镜像)

{
  "useTaobaoRegistry": true,
  "packageManager": "npm"
}

2.3、创建 vue-cli3 脚手架

有以下两种方式创建:

  • 命令行创建:vue create demo,启动项目使用 npm run serve
  • UI 界面创建(推荐):vue ui

这里主要讲的就是 UI 界面创建:

a)在命令行中输入 vue ui,就会自动跳出页面

b)创建项目

c)选择手动创建项目

d)选择插件(自己根据情况选择)

e)配置项目

f)创建成功

g)建议安装,方便浏览器调试

2.4、启动项目

a)可以在命令行中输入 npm run serve,也可以直接使用 vue ui 运行项目(打包编译都可以在任务中完成哦),如下

b)运行成功后,可以看到各项监控指标

c)成功

相关推荐
神仙别闹16 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
MediaTea1 小时前
七次课掌握 Photoshop:选区与抠图
ui·photoshop
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习