cli火速搭建vue项目,boostrap项指标秘籍

作者: 韦德国际1946国际网址  发布:2019-05-28

一、Vue CLI初始化Vue项目

vue-cli 是八个合法公布 vue.js 项目脚手架,使用 vue-cli 能够长足成立 vue 项目。那篇文章将会从实际操作的角度,介绍任何搭建的经过。

平昔上干货......

参考:cli火速搭建vue项目,boostrap项指标秘籍。vue-cli

全局安装vue cli

1. 避坑前言

步骤:

1.npm run dev

npm install --global vue-cli创设3个根据 webpack 模板的新类型

事实上这一次运用vue-cli的长河并白璧微瑕,反复品味两次都高出以下那个报错:

壹.设置node.js;(下载地址:)安装实现今后,在命令窗口输入node -v   查看node版本。

实施这条命令后,在浏览器输入localhost:8080,就可以知到接待页面:

vue init webpack my-project进入项目目录试运作

图片 1

图片 2

图片 3

npm run dev

制造vue-cli工程项目时的报错

二.装置npm;(node自带npm,在命令窗口输入npm -v   查看npm版本)

招待页面

二、将BootStrap加入到Vue项目中

在网络查了无数素材才发觉原来是node版本过低的主题材料,就算尚无找到合法对那个“过低”难题的解释,可是依赖海外网上老铁的经验之谈,应该是起码使用node6,作者将node四更新至node八其后确实尚未报错了,顺遂搭建。相关答疑帖:

图片 4

2.npm run build

安装JQuery(因为Boostrap是正视于JQuery的)

图片 5

3.装置webpack;(在命令窗口输入npm install webpack -g,如安装到位,输入webpack -v就可以查看版本)

进行那条命令后,会扭转静态文件,在根目录的dist里,里面有个index.html,那是大家能够再服务器的钦赐路径访问应接页面了,不过build在此之前需求将config文件下的index.js中build对象里的assetsPublicPath: '/'改成assetsPublicPath: './'(加3个.),那样build之后,展开dist文件中的index.html技艺寻常访问。

npm install jquery --save-dev

确认node与npm的版本

图片 6

图片 7

安装Boostrap

将以此位于最前面正是希望大家在搭建前,应该先确定保证将node更新至6上述,那样能少走一些弯路。下边起始正式介绍任何创设进度。

四.装置vue-cli;(在命令窗口输入npm install vue-cli -g,如安装到位,输入vue -V就可以查看版本,注意这里是大写的“V”)

config/index.js

npm install bootstrap --save-dev

2. 行使 vue-cli 搭建项目

图片 8

3.付出意况切勿修改 assetsPublicPath: '/'

在main.js中分别加多jquery,bootstrap.css, bootstrap.js

下边整个进度是依照已经设置node.js和cnpm的基础上,node.js如何设置就不在这里详说了。如何全局化安装cnpm,这里大致提一下:

五.在指令窗口通过cd命令进入你想制造项指标文本夹(只怕手动张开你想创立项目标公文夹,在文书夹内按住shift 鼠标右键,选取“在此间展开powershell窗口”),输入vue init webpack vue0贰(vue0二为您创制的连串文件夹的名字,可活动改换),会出现提醒,一路回车或然输入yes回车,然后等待安装重视就可以。提醒如下图:

上一条为了在生育情况来看页面,大家修改了config下的index.js中的assetsPublicPath,但如要是在开采景况,一定毫无加上非常点,不然会招致路由报错看不到页面。

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:cli火速搭建vue项目,boostrap项指标秘籍

关键词: vue

上一篇:没有了
下一篇:没有了