vue-cli脚手架如何使用

2020-09-30 21:00 网站建设资讯

  前端目前主流的vue框架,但是对于大多数人来说,vue还是学习起来有些苦恼,那今天根据我对vue-cli的理解来给大家来介绍vue-cli脚手架如何使用。也许,当许多人开发vue时,我们会发现一个问题-我们只会在不了解其内容的情况下使用它。当前的框架可以说是非常优秀的,因此开发人员不必担心建立开发环境。但是有时候,我们仍然必须回到原始的生活经验中,才能改善自己。

    1.1 安装

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

  可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包:

  npm install -g @vue/cli

  # OR

  yarn global add @vue/cli

  1.2使用图形化界面

  你也可以通过 vue ui 命令以图形化界面创建和管理项目:

  上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

vue-cli

  1.3 创建项目

  1.3.1 默认型

  新建文件夹,在该文件夹下打开命令窗口,输入以下命令进行新建项目,当然我起的项目名字叫 vue-webpack-demo

  再来手动的,我起的项目名字叫 vue-webpack-demo2,如下图,让你选择那些选项,按 空格键 是选择单个,a 键 是全选。

  启动命令

  // 1. 进入项目

  cd vue-webpack-demo

  // 或者 cd vue-webpack-demo2

  // 2. 安装依赖

  npm i

  1.4 项目改变

  相比 vue-cli 2.X 创建的目录,vue-cli 3.0 创建的目录看不见 webpack 的配置

  // 3. 启动

  npm run serve

  安装过程也发生了一些变化,配置可以保存,下次可以再用,像前面的 vue-webpack4。

  手动配置 webpack:在根目录下新建一个 vue.config.js 文件,进行你的配置 :

  1. npm 的全局路径被修改了

  我都不记得在装什么包的时候修改了 mac 中 npm 的全局路径了,平时 npm 运行各种命令不报错。

  全局卸载 vue-cli 命令行:

  npm uninstall vue-cli -g;

  但是今天全局卸载 vue-cli 的时候一直不成功,搞了一个小时,结果看了一下 npm 的全局路径,才发现路径不对!!!

  如果你的 npm 的全局路径也变了,请按如下步骤修改加默认的。

  方法一:

  原因:npmr 的配置改变了,导致正确的 npmr 不能用。

  按上面的我的方法修改完,再全局卸载 vue-cli 果然就成功了。

上一篇:网站访问的客户体验应该怎么提升呢
下一篇:现在的企业还有必要做自己的官网吗?

猜你喜欢

手机扫一扫添加微信

余经理15558375523(微信同号)