VUE 模板创建以及常用依赖安装

不念不忘少年蓝@ 2021-09-16 14:46 405阅读 0赞

**使用webpack模板**

vue init webpack my-project

本文示例运行于vue-cli(v2.8.1),命令行提示如下：

? Project name (my-project) *//请输入项目名称，回车默认*

? Project description (A Vue.js project) *//请输入项目描述，回车默认*

? Author xsl <398818817@[qq.com][]> *//请输入作者名，回车默认*

? Vue build *//请选择构建模式，请直接回车选择第一条*

> Runtime + Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific

HTML) are ONLY allowed in .vue files - render functions are required elsewhere

? Install vue-router? Yes *//是否安装vue-router,回车*

? Use ESLint to lint your code? Yes *//是否安装ESLint代码检查器，回车*

*//个人比较偏爱airbnb的编码规范，此处选择第二项*

Standard (https:*//*[github.com/feross/standard)][github.com_feross_standard]

>AirBNB (https:*//*[github.com/airbnb/javascript)][github.com_airbnb_javascript]

none (configure it yourself)

? Setup unit tests with Karma + Mocha? Yes *//单元测试，请按需选择*

? Setup e2e tests with Nightwatch? Yes *//端到端测试，请按需选择*

如果对于eslint报错并不明白的，可以参考eslint官方文档提供[ESLint代码检查规则索引][ESLint];

安装依赖 :  npm  install

### **1.Vue引入jquery** ###

**使用命令npm install jquery --save-dev 安装jquery。**

\--save-dev表示自动添加配置依赖到package.json文件的devDependencies中,开发环境

如果只加--save表示自动添加配置依赖到package.json文件的dependencies中，生产环境

**在webpack.base.conf.js中添加如下内容：**

var webpack = require('webpack')

和

plugins: \[

**new **webpack.ProvidePlugin(\{

$: **"jquery"**,

jQuery: **"jquery"**

\})

\],

**在main.js中配置全局配置**

**import $ from 'jquery'**

### 2.Vue引入bootstrap ###

**安装bootstrap，使用命令npm install bootstrap --save-dev**

**在main.js中添加如下内容：**

**import ****'bootstrap/dist/css/bootstrap.min.css'**

**import ****'bootstrap/dist/js/bootstrap.min'**

### **3.引入Less** ###

**1.安装less和less-loader  : 命令：cnpm install less less-loader --save**

**2.配置less: 路径：build---webpack.base.conf.js添加**

**\{**

**test: /\\.less$/,**

**loader: 'style-loader!css-loader!less-loader'**

**\}**

**4.引入swiper**

**    **

**    cnpm install swiper --save-dev**

**在mins中引入**

**import ****'swiper/dist/css/swiper.css'****;**

**插件在哪写在哪引入**

**import ****Swiper ****from ****'swiper'****;**

[qq.com]: http://qq.com/
[github.com_feross_standard]: http://github.com/feross/standard%29
[github.com_airbnb_javascript]: http://github.com/airbnb/javascript%29
[ESLint]: https://link.jianshu.com/?t=http://eslint.org/docs/rules/

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 Docker安装以及常用命令

Docker安装以及常用命令一、docker安装 1.yum更新 yum update 2、安装需要的软件包 yum-util 提供yum-

落日映苍穹つ/ 2023年09月29日 15:23/ 0 赞/ 19 阅读

相关 IDEA开发工具模板使用(常用模板/修改模板/创建模板)

代码模板是什么它的原理就是配置一些常用代码字母缩写，在输入简写时可以出现你预定义的固定模式的代码，使得开发效率大大提高，同时也可以增加个性化。最简单的例子就是在Ja

超、凢脫俗/ 2023年09月24日 14:29/ 0 赞/ 78 阅读

相关 vue常用模板

1.element > 在线地址： > http://blog.gdfengshuo.com/example/work/\/dashboard > 文档: > h

我就是我/ 2023年02月27日 10:53/ 0 赞/ 21 阅读

相关 vue快速创建模板

vue快速创建模板 [elementUi模板，复制https在vs上面通过克隆来下载][elementUi_https_vs] [elementUi_https_vs

淩亂°似流年/ 2023年01月15日 10:22/ 0 赞/ 142 阅读

相关创建vue模板

模板： <template> <div> </div> </template>

╰+哭是因爲堅強的太久メ/ 2022年02月28日 16:36/ 0 赞/ 336 阅读

相关 vue(一)—安装&实例创建&挂载点&模板

1、安装首先去Vue官网菜单栏的学习选项中下载vue，可以下载开发板或者是生产版将下载好的vue.js文件放入要做项目的的目录下通过< script

悠悠/ 2022年01月29日 10:41/ 0 赞/ 286 阅读

相关 Vue模板与常用组件依赖

使用webpack模板 vue init webpack my-project 本文示例运行于vue-cli(v2.8.1),命令行

╰+哭是因爲堅強的太久メ/ 2021年09月16日 16:48/ 0 赞/ 349 阅读

相关 VUE 模板创建以及常用依赖安装

使用webpack模板 vue init webpack my-project 本文示例运行于vue-cli(v2.8.1),命令行提示如下： ? Project nam

不念不忘少年蓝@/ 2021年09月16日 14:46/ 0 赞/ 406 阅读

相关 Vue.js安装以及创建项目

一.安装Vue.js 怎么搭建vue.js的环境呢？要搭建vue的环境需要借助node.js的npm的包管理器，所以先去看下[NodeJS、NPM安装配置步骤][Node

﹏ヽ暗。殇╰゛Y/ 2021年09月14日 01:10/ 0 赞/ 478 阅读

相关【VUE】vue后台常用模板

vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 element：基于vuejs2.0的ui组件库。 vue-router：...

朱雀/ 2020年04月27日 07:01/ 4 赞/ 5259 阅读