Vue-Cli脚手架基本搭建以及JQ，bootstrap，less，字体的引入

最新推荐文章于 2023-07-21 09:48:16 发布

weixin_33895604

最新推荐文章于 2023-07-21 09:48:16 发布

阅读量158

点赞数

文章标签： javascript webpack ViewUI

原文链接：https://juejin.im/post/5a742f7ef265da4e9e30339d

版权

Vue cli

的安装

Vue cli

使用中经常会遇到依赖没有安装完全(没有安装全)

下面是需要安装的

建议由有一些js，html，css基础的小伙子的观看

1. VUEX (单向数据，状态管理器，小项目不需要)

2. Jquery

3. Less

4.字体包

5. Resource (ajax不是vue官网更新的axios建议使用这个)

6. Router (现在版本都有的基本不用下)

先看下自己的node版本和npm的版本

可以下一个淘宝的cnpm镜像包npm install -g cnpm --registry=http://registry.npm.taobao.org（不建议下载因为会有一些依赖会少）

$ npm install -g vue-cli

安装

vuecli

$ vue init webpack firstApp 安装基于webpack的项目

其他的基本一致空格下去就可以

$ cd firstApp 进入项目

$ npm install 安装依赖

上面第一个红框报错最后的红框解决

可能会遇到多个错误

就多npm install几次一只到没有错误

然后我们就可以打开项目了

$ npm run dev

这样我们的基本的就出来了下面我们安装一下

下面的

cnpm install vue-router vue-resource --save Resource

的下载

npm install jquery --save jq的下载

cnpm install vuex --save vuex的下载

cnpm install less --save-dev less的下载

然后我们修改

const webpack = require("webpack"); 前面引入webpack

'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
jquery: "jquery/src/jquery"

（可以复制）

{
test: /\.css$/,
loader: "style-loader!css-loader"
},

（可以复制

这个是

CSS

的引入）

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},

（可以复制

这个是

CSS

的引入）

{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?mimetype=image/svg+xml'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader"
},

（可以复制）

plugins: [// 3.

配置全局使用