vuecli脚手架 vuecli脚手架部署

vue-cli脚手架安装及运行

Vue是：构建用户界面的渐进式框架，可以自底向上逐层应用（大概是这个意思？由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。）

（前期刚学时不建议直接安装vue-cli脚手架，可以直接通过引入，如： 然后直接用就行了）

1.首先Windows+R 打开cmd；输入npm -v 和node -v 检测是否安装了npm和node.js，没安装先去安装node.js（npm是随node.js一起安装的包管理工具，就不用安装了）附上node.js安装地址：

2.然后还需要淘宝镜像安装cnpm和webpack支撑（有时候安装依赖特别慢 就会用到cnpm）

淘宝镜像安装cnpm命令：

安装之后 执行cnpm -v，如果出现相应的版本号就是安装成功

webpack安装命令：

安装之后 执行webpack -v，它会问你：

直接回车就可以，然后再执行webpack -v，如果出现相应的版本号就是安装成功

3.最后就是安装vue-cli脚手架了

vue-cli脚手架安装命令：

安装之后 执行 vue -V，如果出现相应的版本号就是安装成功

4.用vue-cli创建一个基于webpack的新项目并运行

首先可以在桌面新建一个文件夹，如：Vue

然后执行cd Vue 进入文件夹，然后输入以下命令新建项目，回车

然后根据提示一路回车，这时文件夹下就会有很多相关文件了

最后用cnpm安装依赖：

最后的最后 就是运行项目啦 输入以下命令：

或者以下命令也可以：

如果成功的话，一般就是提醒你可以在浏览器地址栏输入以下地址就能正常访问了

至此，应该就可以正常访问一个新建的项目了，接下来的就是在新项目中通过组件、事件、指令等等丰富项目。

本文根据vue.js官方文档学习总结。附上官方文档：

vuecli版本和node版本的关系

相互推送。根据查询博客园所知，vuecli版本和node版本的关系是相互推送。vue cli(command line interface) 是vue的脚手架，用于快速搭建一个项目的模版，通俗来讲就是创建一个空项目，并且做好相关的配置，最主要是webpac。

关于vue-cli脚手架搭建的vue项目在手机浏览器无法打开的问题

毕竟不是自己手动搭的脚手架，很多配置都是吃现成的，所以踩坑常用的事。在config的index.js文件夹里。把host的值由localhost改为“0.0.0.0”，然后就可以用手机浏览器ip+端口号打开了。

vuecli脚手架 vuecli脚手架部署

ps:改配置文件就是重新npm start 一下才能看到效果

ps:localhost改成本地ip的方法也是可以的。但是如果这样做的话，pc端就不能用localhost了，必须要用ip加端口号才能打开。

以上

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

先看这个表格：

是不是有了一个整体的感觉？我们再来详细的看一下。

官网：

vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。

vue-cli 用于创建 vue2 的项目；

@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。

使用起来还是比较繁琐的，首先要安装脚手架，然后使用 vue create hello-world 创建项目，具体的就不介绍了。

官网：

create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。

然后我们可以选择需要的各种插件：

官网：

使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。

目前支持的模板预设如下：

官网：

rollup 是一种打包工具，特点就是，打的包非常精简，体积小。

官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。

尤雨溪在知乎的一次回答（ ）里提到：

webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。

Rollup 是后起之秀，打包更简洁。

vite 把 rollup 变成了“开袋即食”，便于新手入门。

create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。

所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。

安装vue脚手架失败

使用vue创建项目的时候

使用git命令的时候，需要用到的有 git，node，vue，vue cli

有的时候使用npm安装一些插件的时候，可能网速不太好的情况，使用cnpm命令安装速度会好一些

使用cnpm的时候需要先安装淘宝镜像

这里是安装淘宝镜像的命令

$npm install -g cnpm --registry=

第一次使用vue项目管理器的时候，遇到的问题：

vue cli脚手架安装失败，导致无法启用 vue项目仪表盘

解决的办法：

把原本的命令换为：cnpm i -g @vue/cli

安装成功

然后使用 vue -V命令查看一下版本

使用 vue -h 查看输出的使用信息

输入 vue ui

如何安装vue-cli脚手架

的vue-cli已经非常清楚明白咯。你只要利用npm进行安装vue-cli，之后：

vue init webpack (这里的三个点是你的项目命名);

然后他就自动的模版引擎，后面的东西可以根据它的提示进行后续操作，启动的话也是很简单的。

启动完成就是 npm install 安装依赖完了就 npm run dev。就可以了

不依赖vue-cli脚手架创建vue项目

我们一般创建vue项目都是通过vue-cli脚手架去创建，这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等

项目源码：

1.新建项目

2.使用vscode打开项目

3.初始化

4.安装基本的 npm 包

5.创建文件夹以及文件

6.配置webpack.config.js

vuecli脚手架 vuecli脚手架部署

在这之前先安装一些依赖

模板解析依赖：

样式依赖:

css-loader:

文件加载依赖

解析es6语法依赖:

这是一个webpack插件，可简化HTML文件的创建以服务您的webpack捆绑软件

现在就可以配置webpack.config.js，如果有什么不清楚的可以参考官网

7.安装解析依赖

8.修改package.json文件

9.配置babel,创建.babelrc文件

vuecli脚手架 vuecli脚手架部署

修改webpack.config.js

如果编译时报错的话可能是因为你没有安装依赖:

10.主要文件：

app.vue：

index.js:

html文件：

Vue项目文件夹大致参考

1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins文件夹下可以写各种调用ajax请求方法的方法，然后在需要调用这些方法请求数据的文件中：

这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据 直接在文件类似this.getAllDemoClass();就能调用方法

通用组件存放文件夹：

在这个文件夹下封装了项目需要的组件 然后在components下的index.js中向外暴露即可 然后在使用组件的文件中引用components即可

后续：

1.引入ant-design-vue：

具体引入操作可见官网

2.引入Vue Router

路由配置文件：router/index.js

3.引入vuex

新建store/index.js

news/index.vue

4.页面顶部进度条插件Nprogress

使用：

本地没有cli脚手架也可以使用vue代理跨域吗

可以。CLI脚手架是为了保证各施工过程顺利进行而搭设的工作平台，本地没有该平台也可以通过vue-cli脚手架搭建项目，webpack设立一个本地服务器作为请求的代理对象，通过该服务器转发请求至目标服务器，得到结果后再转发给前端。