提示：从0开始搭建vue项目详细解说，从node开始配置vue

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装node.js（https://nodejs.org/en/）

• 下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。
  设置nodejs prefix（全局）和cache（缓存）路径（可以跳过)

在nodejs安装路径下，新建node_global和node_cache两个文件夹

设置缓存文件夹

npm config set cache "D:\vueProject\nodejs\node_cache"
npm config set prefix "D:\vueProject\nodejs\node_global"

基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

设置环境变量（非常重要，mac电脑无需设置）

1. 鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2. 修改系统变量PATH
   
   

3. 新增系统变量NODE_PATH
   

4. 查看node版本号和npm版本号
   

二、安装vue2.0脚手架

npm i @vue/cli -g

查看vue版本号

后来创建vue项目可以选择可视化vue ui或者命令行创建

1.vue ui创建

vue ui

打开一个可视化的配置页面在创建等操作

注意：如果vue ui打不开，则查看是否有ui功能

vue -h

卸载老版本：

npm uninstall vue-cli -g

下载新版本，vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的

npm install @vue/cli -g

2.命令行创建

vue create 项目名
选择预设
Please pick a preset: (Use arrow keys) ----使用键盘上下键选择 回车确定
default (babel, eslint) ----默认只安装babel和eslint
Manually select features ---- 自定义
手动选择插件（1,4,5,6）
Check the features needed for your project: ----空格选择，a全选，i反选 回车确定
Babel ---- 将高级版本ES转换为浏览器识别的JS语法
TypeScript---- JS的超集，提供了JS面向对象支持
Progressive Web App (PWA) Support ----渐进web app支持
Router ----路由、请求所对应的地址
Vuex ---- 数据状态管理器、用于多页面传参
CSS Pre-processors ----CSS预处理，将高级CSS语法转换为浏览器识别CSS语法
Linter / Formatter ----语法检测
Unit Testing ----单元测试
E2E Testing ----测试
选择路由模式
Use history mode for router?
History模式---- yes
Hash模式---- no 路由的后方有#只刷新部分内容（建议采用）
选择CSS预处理
Pick a CSS pre-processor
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
选择插件的配置存放
Where do you prefer placing config for Babel, ESLint, etc
In dedicated config files ----独立的配置文件
In package.json ----放在package.json中
是否保存预设
Save this as a preset for future projects ----是否把你选择的作为预设
N不保存
Y保存

标签：node,npm,vue,----,解说,安装,CSS,搭建
来源： https://blog.csdn.net/sansanyuner/article/details/114389490