vue Cli（脚手架）安装

Posted stay_少年与梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue Cli（脚手架）安装相关的知识，希望对你有一定的参考价值。

vue Cli（脚手架）安装全过程

vue cli是什么及它的好处（介绍）

vue cli (也可以说是脚手架） 是一个基于vue.js进行快速开发的完整系统。

  • 通过 @vue/cli 实现的交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：

    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

一.首先安装node.js

Vue CLI 4.x 安装需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）

下载安装nodeJs（和其他系统软件一样根据需求按步骤安装）这里不做介绍，
中文官方下载地址：http://nodejs.cn/download/

查看node版本：node -v

二.安装vue cli 指令

npm install -g @vue/cli

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

查看版本 vue --version

配置淘宝镜像
也可以选择不配置

可以使进入项目时加载速度快一些
npm config set registry https://registry.npm.taobao.org

如果此错误

npm ERR! code EEXIST
npm ERR! path C:\\Users\\tangh\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_apollo-server-core@2.23.0@apollo-server-core\\node_modules\\@apollographql\\graphql-playground-html\\node_modules\\.bin\\xss.ps1
npm ERR! Refusing to delete C:\\Users\\tangh\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_apollo-server-core@2.23.0@apollo-server-core\\node_modules\\@apollographql\\graphql-playground-html\\node_modules\\.bin\\xss.ps1: ../../../../_xss@1.0.8@xss/bin/xss symlink target is not controlled by npm C:\\Users\\tangh\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_apollo-server-core@2.23.0@apollo-server-core\\node_modules\\@apollographql\\graphql-playground-html\\node_modules\\xss
npm ERR! File exists: C:\\Users\\tangh\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_apollo-server-core@2.23.0@apollo-server-core\\node_modules\\@apollographql\\graphql-playground-html\\node_modules\\.bin\\xss.ps1
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\\Users\\tangh\\AppData\\Roaming\\npm-cache\\_logs\\2021-04-15T07_45_39_179Z-debug.log

解决方法

1.重新安装node.js
2.把安装node文件夹下的node_cache（node缓存文件夹）跟node_global（全局安装是安装在node_global目录下的）两个文件夹下的内容全部删除
再次执行 npm install @vue/cli –g 就可以了
3.找到C:\\Users\\tangh\\AppData\\Roaming 里面的npm 和npm-cache 删了
4.找到C:\\Program Files\\nodejs 删了
5.把安装node文件夹下的node_cache（node缓存文件夹）跟node_global（全局安装是安装在node_global目录下的）两个文件夹下的内容全部删除

再次执行 npm install @vue/cli –g 就可以了

如果报此错误

vue不是内部命令问题

npm config list 查看安装位置

创建一个项目

指令

vue create my-project

my-project 是自定义项目名

或者vue ui 图形界面创建项目

vue ui
配置 http://localhost:8000

创建项目时报错及解决方法

创建项目中如果安装失败把node_modules文件夹删掉
            然后进入项目目录执行 cnpm i命令重新安装会安装package.json里面记录好的内容帮你安装
            如果创建项目报错
                vue : 无法加载文件 C:\\Users\\tangh\\AppData\\Roaming\\npm\\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/
                go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
           
解决办法 以管理员身份运行cmd
                在控制台中在输入 set-ExecutionPolicy RemoteSigned    
                会出现选项  选择Y 或者A ，就好了

注意：cnpm 命令是安装完淘宝镜像使用的命令,没安装淘宝镜像用 npm

安装选项

一.

Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features 手动选择

二.

() Choose Vue version 选择vue版本
>() Babel 语法转换器把ES6转换成ES5
() TypeScript 是javascript 的一个超集，扩展了 JavaScript 的语法,使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support 支持渐进式网页应用程序
() Router 路由管理器
() Vuex 状态管理库
() CSS Pre-processors css预处理器如 scss less
(*) Linter / Formatter 代码风格,格式校验
( ) Unit Testing 单元测试
( ) E2E Testing 端到端测试

三

选2.0

四

? Use Babel alongside TypeScript (required for modern mode,
auto-detected polyfills, transpiling JSX)? (Y/n) y
使用Babel与TypeScript一起用于自动检测的填充

五

Use history mode for router? (Requires proper server setup for index
fallback in production) (Y/n) y 路由模式

六

Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less
Stylus Sass/SCSS (with dart-sass)

七

ESLint with error prevention only 仅错误预防
ESLint + Airbnb config Airbnb配置
ESLint + Standard config 标准配置
ESLint + Prettier 漂亮
>TSLint (deprecated) 弃用
>Lint on save 保存时检查
Lint and fix on commit 提交时检查

八

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
In dedicated config files 在专用的配置文件中
In package.json 在package.json

九

将此作为将来项目的预置吗
>In dedicated config files 在专用的配置文件中
In package.json 在package.json

十

保存预设为 Save preset as:

进入项目目录

启动

npm run serve

localhost:8080

在浏览器输入就可以进入项目了

常用命令

npm run lint 修复错误整理代码

npm run build 发布编译生成上线的压缩文件

npm run serve 启动项目

vue ui 图形化界面

以上是关于vue Cli（脚手架）安装的主要内容，如果未能解决你的问题，请参考以下文章

vue基础1--脚手架的使用与vue基础指令

搭建vue-cli脚手架

vue-cli 快速搭建脚手架

安装使用vue-cli脚手架

vue2.0 安装 cli脚手架

vue-cli的安装及目录