vuecli安装教程（vuecli4安装）
今天给各位分享vuecli安装教程的知识，其中也会对vuecli4安装进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
Vue3.x 超详细安装教程
npm 或 yarn 安装
查看版本（是否安装成功）：
进入demo目录： cd G:\demo\
创建 my-project 项目： vue create my-project
选择自己所要集成的配置（格键是选中与取消，A键是全选，回车确定）
这里我的选择如下：
配置项：
安装的 vue-cli 将会是基于 vue3.x 版本
如果在项目中想要保持使用 TypeScript 的 class 风格的话，建议大家选择y。
这里我选择： Sass/SCSS（with node-sass）
这里我选择： ESLint with error prevention only
这里我选择： Lint on save
这里我选择： In dedicated config files
cd my-project ( 进入项目根目录 )
yarn serve ( 启动项目 )
现在的目录是 Vue3.x 的 cli 看上去简洁多了，去掉了 Vue2.x 中 build 和 config 等目录
在项目的根目录下新建 vue.config.js 文件（ 是根目录，不是src目录 ）
Vue CLI内网安装（禁止运行vue指令解决方案）
1、Vue cli简介：
Vue cli是一个基于Vue.js 进行快速开发的完整系统，Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
cli(@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue命令。它可以通过vue create快速搭建一个新项目，或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目。
2、 Vue cli安装
npm install -g @vue/cli
安装之后，运行vue指令，遇到以下问题：由于公司内网执行策略限制，会禁止运行vue指令。
解决方案及步骤如下：
第一步：执行Set-ExecutionPolicy RemoteSigned更改执行策略。
第二步：如果没有权限更改全局的执行策略，加上-Scope CurrentUser后再次更改（Set-ExecutionPolicy RemoteSigned -Scope CurrentUser），并为ExecutionPolicy参数提供值为：RemoteSigned。
第三步：执行策略更改完成后，成功运行vue指令。
局部安装并使用vue-cli(或者其他npm包)
局部安装并使用vue-cli(或者其他npm包)
新建目录：mkdir vue-cli2
切换目录：cd vue-cli2
初始化项目：npm init -y
安装：npm i vue-cli
查看版本：npx vue -V
使用：npx vue init webpack project
补充：
安装vue-cli3.x：npm i @vue/cli@3
使用：npx vue create project
vue-cli全局安装：npm install vue-cli -g
vue-cli的版本查看：vue -V
vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的：
npm install @vue/cli -g
如果原来已经安装了vue-cli的话需要先卸载原来的安装：
npm uninstall vue-cli -g
vue-cli起项目步骤
一、 安装 node.js
安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。
二、安装webpack
命令：npm install webpack -g
安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。
三、安装 vue-cli
命令：npm install -g vue-cli
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本
四、使用vue-cli来构建项目
1、在硬盘中找一个放项目的文件夹
2、在文件夹下打开命令盘，输入命令
Vue-Project是我们自己设置的项目名称，项目名称不能用中文
命令：vue init webpack Vue-Project
3、进入项目工程目录
4、安装项目所需依赖 npm install
5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
命令：npm install vue-router vue-resource --save
创建完成的项目目录，如下图
各个目录的作用
最后一步启动项目
命令：npm run dev
启动成功，打开浏览器8080窗口，页面如图所示
关于vue create 和vue init webpack的区别 ？
vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)
或
另一种：
vuecli安装教程的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vuecli4安装、vuecli安装教程的信息别忘了在本站进行查找喔。
