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

不念不忘少年蓝@ 2021-09-16 14:46 454阅读 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)

AirBNB (https://github.com/airbnb/javascript)

none (configure it yourself)

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

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

如果对于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’**;

发表评论

表情：
评论列表 （有 0 条评论，454人围观）

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

相关阅读