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\[email protected]@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\[email protected]@apollo-server-core\node_modules\@apollographql\graphql-playground-html\node_modules\.bin\xss.ps1: ../../../../[email protected]@xss/bin/xss symlink target is not controlled by npm C:\Users\tangh\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@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\[email protected]@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,vue)