Vue-CLI入门（webpack入门、安装配置Vue-CLI（命令、手动、自动版本）、使用Vue-CLI创建组件和Vuex和Vue-router、配置跨域请求数据以及配置webpack添加插件等）

YF-SOD

已于 2023-01-10 18:21:24 修改

阅读量1.4k

点赞数 2

分类专栏： Vue # Vue 2.0 文章标签： webpack入门使用 Vue-CLI安装配置 Vue-CLI使用Vuex Vue-CLI使用router Vue-CLI配webpack

于 2021-05-28 16:10:33 首次发布

本文链接：https://blog.csdn.net/AIWWY/article/details/117332396

版权

Vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

Vue-CLI封装的webpack配置属性链接

webpack入门链接

webpack使用入门（配置loader：style、css、url、file、babel；plugin：html-webpack、mini-css-extract、clean-webpack）_AIWWY的博客-CSDN博客

Vue-CLI介绍

Vue官方提供的脚手架工具，用于帮助搭建好一套利用webpack管理vue的项目结构。

安装配置Vue-CLI

全局安装命令

npm install -g @vue/cli或yarn global add @vue/cli安装好后可以通过vue -V查看。

在你要创建项目的目录下输入vue create myproject，其中myproject为项目名称，此时可以选择版本是自动版本（vue2，vue3）、手动版。

自动版本

我们先选择自动版本的，此时便会生成myproject的文件，其中有如下文件（vue/cli 2的版本还有build和config文件，其中存储了webpack的配置文件，之后的版本隐藏了这些文件）：

node_modules文件：存储了依赖相关的包。

public文件：任何放置在该文件夹中的静态资源都会被简单的复制，而不经过webpack。你需要用绝对路径去引用他们（可以通过http://localhost:8080/文件名或/文件名来引用这些资源），一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库。

src文件：在手动版本中介绍。

手动版本

这里我们重新选择手动配置，然后选择需要使用的配置，CSS Pre-procssors是css预处理器，Linter/Formatter 是格式化代码功能。我们通过方向键加空格选中，回车进行下一步。

然后回弹出以下选择：

选择vue版本（自选）。
选择vue router模式（选yes）。
选择css 预处理器，选第一个Sass/SCSS（with dart-sass）。
选择ESLink配置，选择第三个（+Standard config）。
选择检查的模式，第一个代表检查后保存，第二个代表检查后自动修改格式后提交，将两个都选择。
选择把配置文件放在一个单独的config文件中还是放入package.json中，选第一个。
选择是否通过将之前的配置保存方便下次直接使用（自选）。

创建成功后src文件会相比自动创建的src文件多一些文件

src文件（在引用下面的文件时可以直接用@符号代表src的绝对路径）：

assets文件：存储项目中自己的一些静态文件（经过webpack的处理了的文件，图片/字体等）。
components文件：存储项目中的自定义组件（小组件，公共组件）。
views文件：存储项目中的自定义组件（大组件，页面级组件，路由级别组件）。
router文件：存储VueRouter相关文件。
store文件：存储Vuex相关文件。
App.vue：根组件（Vue控制区）。
main.js：入口js文件。

运行和打包项目

命令行进入到项目文件中使用npm run serve即可。然后在浏览器打开对应的网址即可看到项目。通过npm run build 便可以打包当前项目，这时会生成dist文件，该文件变为打包好的文件。

使用Vue-CLI

首先我们将public文件夹下内容删除，然后在删除src下所有文件，只保留文件目录（assets、component等，里面文件也删除），在public文件夹下创建index.html，在index.html中编写网页，并选择vue的控制区域例如选中<div id="app"></div>，然后在src文件夹下创建App.vue文件（理解为组件开发文件），写入如下内容（其中template相当于组件模板，export default相当于注册组件的对象，style中的样式如果加了scoped便只会添加给当前组件中的标签，其子组件中的标签也会添加）：

// 用于编写当前组件的结构代码
<template>
<div>{{name}}</div>
</template>
// 用于编写当前组件的业务代码
<script>
export default {
  name: 'App',
  data: function () {
    return {
      name: 'pyf'
    }
  }
}
</script>
// 用于编写当前组件的样式代码
<style scoped>
div{
    background-color: aqua;
}
</style>

再创建main.js（入口js文件）写入如下内容（由于下载的依赖都在node-modules文件中，所以只需要import导入即可，render函数我们在组件化开发的组件渲染方式中介绍了，render函数中的App是和上面App.vue中export name对应）：

import Vue from 'vue'
import App from './App.vue'
// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  render: c => c(App)
})

此时我们再通过npm run serve运行，这时在浏览器打开对应的网站便可以查看index.js中写的内容，<div id="app"></div>的控制区会显示为<div>pyf<div>，其颜色为aqua。

创建子组件

首先需要在component文件夹下创建Child.vue内容格式同App.vue，设置export的name为Child，定义子组件内容，然后在App.vue的script中添加import Child from './components/Child.vue，然后在export default的导出对象中添加属性components:{Child:Child}。此时在template中便可以使用子组件。

使用Vuex

在store文件夹下创建index.js内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    name1: 'vuex pyf'
  }
})
export default store

然后在main.js中插入import store from './store/index.js'，并给vue的实例对象添加属性store:store，此时便可以在组件和实例对象中通过this.$store.state.name1访问vuex中定义的name1数据。

使用Vue-router

我们根据之前的步骤再创建一个子组件并也添加在App.vue中的导出对象中命名为Child2，在router文件夹下创建index.js内容如下（其中Child和Child2是child.vue和child2.vue文件下导出的名字name，注意大小写）：

import Vue from 'vue'
import Router from 'vue-router'
import Child from '../components/child.vue'
import Child2 from '../components/child2.vue'
Vue.use(Router)

const routes = [
  { path: '/foo', component: Child },
  { path: '/bar', component: Child2 }
]
const router = new Router({
  routes
})

export default router

然后在main.js中插入import router from './router/index.js'，并给vue实例对象添加属性router: router，此时便可在App.vue的template中使用<router-link to='/foo'>foo</router-link><router-link to='/bar'>bar</router-link><router-view></router-view>切换路由。

修改webpack配置

在项目文件夹下（与package.json文件同级）创建vue.config.js文件（修改了该文件后需要重新npm run serve才能看到效果），内容如下：

module.exports = {
  outputDir: 'bundle'
}

这时运行npm run build ，便会将文件打包到bundle目录中而不是dist文件中，还可以添加其它属性，相比webpack配置变简单了，因为Vue-CLI对原有的属性进行了封装。其它属性见下面链接：

Vue-CLI封装的webpack配置属性链接

配置参考 | Vue CLI

配置反向代理（跨域请求数据）

在上链接中有个属性devServer，通过配置它可以跨域请求数据（通常在Headers中的Response Headers中的Access-Control-Allow-Oringin:*代表允许跨域请求，未设置的需要配置反向代理，有些虽然设置了，但还设置了需要验证信息，见axios介绍中的例子：fetch简介和axios介绍（引用链接、get和post请求方式、自定义请求、请求拦截、官网）_AIWWY的博客-CSDN博客）。例如我们请求下图数据。通过（需要先npm install axios -D，并在使用的文件中导入import axios from 'axios'）axios.get('https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=6E4FBAB0B87711EB8CB08B6D4562638C9F8D175B4FF54FC19FB440EC4CB87CA0&optimus_risk_level=71&optimus_code=10').then(res => { console.log(res.data) })打印数据内容是会报404错误，因为没有设置可以跨域请求。

配置反向代理：在vue.config.js的导出对象中添加属性devServer:{proxy: {'/ajax':{target: 'https://m.maoyan.com',changOrigin:true}}}（表示只有以/ajax开头的请求才会拼接代理），然后将axios请求中的https://m.maoyan.com去掉，此时在重新运行便能请求到数据内容了。

添加webpack中插件

注意上面链接中有个configureWebpack属性，它的介绍是如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。也就说我们可以在这个属性指向的对象中编写原生的webpack配置。

例如我们添加webpack中的版权插件（会自动生成版权信息），见下面链接中的BannerPlugin，然后修改vue .config.js文件如下图（其中banner属性的值为你的版权信息）：

const webpack = require('webpack')
module.exports = {
  outputDir: 'bundle',
  configureWebpack: {
    plugins: [
      new webpack.BannerPlugin({
        banner: 'pyf-sod'
      })
    ]
  }
}

此时在npm run build便会在生成的bundle文件夹下的js、css文件中添加版权信息。

webpack插件链接

Plugins | webpack 中文文档

封装自定义插件

首先在src目录下新建文件夹plugin，然后再在该目录下新建文件夹loading，然后在该文件夹下创建我们的组件Loading.vue和index.js。其中组件Loading.vue内容如下：

// 用于编写当前组件的结构代码
<template>
<div class="container">
    <div class="loading"></div>
    <p class="title">正在加载。。</p>
</div>
</template>
// 用于编写当前组件的业务代码
<script>
export default {
  name: 'Loading'
}
</script>
// 用于编写当前组件的样式代码
<style scoped lang='scss'>
.container{
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}
.loading{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid #fff;
    margin:20px auto;
    border-right-color: #409eff;
    animation:loading 2s linear infinite;
}
@keyframes loading{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
.title{
    text-align: center;
    font-size:16px;
    color:#fff;
}
</style>

index.js内容如下：

import Vue from 'vue'
import Loading from './Loading'
export default {
  install: function () {
    Vue.component(Loading.name, Loading)
  }
}

此时在main.js中导入import Loading from './plugin/loading/index.js'，并注册插件Vue.use(Loading)，便可以使用<Loading>标签。

效果如下图，便是我们封装的自定义插件。

保存自动格式化代码配置

在vs code插件中下载ESlint，然后在设置中搜索settings，打开settings.json文件添加属性"editor.codeActionsOnSave": {"source.fixAll": true}即可。之后保存文件会自动修复格式的问题。

环境变量注入

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

模式和环境变量 | Vue CLI

YF-SOD

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue-CLI入门（webpack入门、安装配置Vue-CLI（命令、手动、自动版本）、使用Vue-CLI创建组件和Vuex和Vue-router、配置跨域请求数据以及配置webpack添加插件等）

目录webpack入门链接Vue-CLI介绍安装配置Vue-CLI全局安装命令自动版本手动版本运行和打包项目使用Vue-CLI创建子组件使用Vuex使用Vue-router修改webpack配置Vue-CLI封装的webpack配置属性链接配置反向代理（跨域请求数据）添加webpack中插件webpack插件链接封装自定义插件保存自动格式化代码配置webpack入门链接webpack使用入门（配置loader：style、css
复制链接

扫一扫

专栏目录