使用webstorm搭建vue-cli项目

素颜马尾好姑娘i 2023-06-06 03:54 25阅读 0赞

# 前言 #

#### 随着vue在前端不断的壮大起来，越来越多的前端工程师使用vue了，作为大型项目的开发，vue-cli是不二之选，所以这篇博客是为搭建vue-cli所写，想要搭建vue-cli项目就必须先有git,node.js,webpack, ####

git地址：[https://git-scm.com/][https_git-scm.com]

node.js地址：[http://nodejs.cn/][http_nodejs.cn]

# 本章目标 #

#### 使用websotm搭建vue-cli项目,前提安装有git,node.js，webpack等等，否则无法实现 ####

# 项目搭建 #

![image][]  
![image][image 1]

#### 然后下面这一段可能会比较久 ####

![image][image 2]  
![image][image 3]  
![image][image 4]  
![image][image 5]  
是否选择vue-router，这里我们选择是，待会后面会用到  
![image][image 6]  
是否使用eslint检查，这里我们选择否  
![image][image 7]  
是否选择单元测试，这里我们也选择否  
![image][image 8]  
是否选择e2e测试，这里我们选择是  
![image][image 9]  
![image][image 10]  
然后项目就搭建完成了，接下来我们需要选择安装包  
![image][image 11]  
假如您的网速比较慢的话，我们可以在控制台中输入 cnpm install  
![image][image 12]  
当所有安装包下载完成之后我们就可以启动我们的项目了  
![image][image 13]  
![image][image 14]  
在地址拦输入http://localhost:8088，如何出现如下界面，那么恭喜你搭建成功了  
![image][image 15]  
接下来，我们对vue-cli中的各个项目进行分析，方便我们以后的开发中能够更好的进行管理  
![image][image 16]  
项目目录:

|-- build                            // 项目构建(webpack)相关代码
    |   |-- build.js                     // 生产环境构建代码
    |   |-- check-version.js             // 检查node、npm等版本
    |   |-- dev-client.js                // 热重载相关
    |   |-- dev-server.js                // 构建本地服务器
    |   |-- utils.js                     // 构建工具相关
    |   |-- webpack.base.conf.js         // webpack基础配置
    |   |-- webpack.dev.conf.js          // webpack开发环境配置
    |   |-- webpack.prod.conf.js         // webpack生产环境配置
    |-- config                           // 项目开发环境配置
    |   |-- dev.env.js                   // 开发环境变量
    |   |-- index.js                     // 项目一些配置变量
    |   |-- prod.env.js                  // 生产环境变量
    |   |-- test.env.js                  // 测试环境变量
    |-- src                              // 源码目录
    |   |-- components                     // vue公共组件
    |   |-- store                          // vuex的状态管理
    |   |-- App.vue                        // 页面入口文件
    |   |-- main.js                        // 程序入口文件，加载各种公共组件
    |-- static                           // 静态文件，比如一些图片，json数据等
    |   |-- data                           // 群聊分析得到的数据用于数据可视化
    |-- .babelrc                         // ES6语法编译配置
    |-- .editorconfig                    // 定义代码格式
    |-- .gitignore                       // git上传需要忽略的文件格式
    |-- README.md                        // 项目说明
    |-- favicon.ico 
    |-- index.html                       // 入口页面
    |-- package.json                     // 项目基本信息

# 测试案例 #

如果项目构建成功之后，那么接下来就开发我们自己的项目，在这里我就做一个小案例，方便大家理解和应用，那么我们接下来的这个案例是关于vue路由的使用，首先我们在src/components目录下构建三个组件componentA,componentB,componentC,结构如下:  
![image][image 17]

#### ComponentA代码如下： ####

<template>
        <div>
          <h1>{
       {msg}}</h1>
        </div>
    </template>
    
    <script>
      export default {
        name: 'ComponentA',
        data(){
          return{
            msg:'这是组件A',
          }
        }
      }
    </script>
    
    <style scoped>
      h1{
        color: red;
      }
    </style>

#### ComponentB代码如下： ####

<template>
        <div>
          <h1>{
       {msg}}</h1>
        </div>
    </template>
    
    <script>
      export default {
        name: 'ComponentB',
        data(){
          return{
            msg:'这是组件B',
          }
        }
      }
    </script>
    
    <style scoped>
      h1{
        color: yellow;
      }
    </style>

#### ComponetC代码如下： ####

<template>
        <div>
          <h1>{
       {msg}}</h1>
        </div>
    </template>
    
    <script>
      export default {
        name: 'ComponentC',
        data(){
          return{
            msg:'这是组件C',
          }
        }
      }
    </script>
    
    <style scoped>
      h1{
        color:blue;
      }
    
    </style>

三个组件构建完成之后，我们修改src/router/index.js，在这里我们引入我们定义的三个组件，实例代码如下:

import Vue from 'vue'
    import Router from 'vue-router'
    import Hi from '@/components/HiComponent'
    import A from  '@/components/ComponentA'
    import B from  '@/components/ComponentB'
    import C from  '@/components/ComponentC'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'hi',
          component: Hi,
        },
        {
          path: '/a',
          name: 'A',
          component: A,
    
        },
        {
          path: '/b',
          name:'B',
          component:B,
        },
        {
          path:'/c',
          name:'C',
          component:C,
        }
      ]
    })

我们修改index.html中的相关内容，代码如下：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>project_03</title>
      </head>
      <body>
        <div id="app">
          <ul>
            <li>
              <a href="#/a">这是组件A</a>
            </li>
            <li><a href="#/b">这是组件B</a></li>
            <li><a href="#/c">这是组件C</a></li>
          </ul>
          
          <router-view></router-view>
        </div>
        
      </body>
    </html>

最后一步，也是最重要的一步，小编自己也会经常犯这个错误,我们需要修改scr/main.js中的文件,清空组件和模板，代码如下：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import router from './router'
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: {},
      template: ''
    })

#### 运行结果： ####

![image][image 18]

#### 点击组件A: ####

![image][image 19]

#### 点击组件B: ####

![image][image 20]

#### 点击组件C: ####

![image][image 21]  
可以看到，我们想要的结果已经出现了，本篇博客的内容就结束了，使用webstorm搭建vue-cli项目，你学会了吗？,如果没有，请在下方留下您的评论。

# 总结 #

本篇博客主要是使用webstorm搭建vue-cli项目，我们需要注意几个点，第一:必须安装有git,第二：必须安装有node.js，第三，必须安装有webpack,然后我我们才能搭建vue-cli项目，当然还有最重要的一点就是修改main.js下的component和template以及在index.html中加入，这一点也是非常重要的，如果您觉得本篇博客对您有用的话，那就是对我最大的鼓励，最后感谢你们的阅读。

[https_git-scm.com]: https://git-scm.com/
[http_nodejs.cn]: http://nodejs.cn/
[image]: /images/20230601/5364ba22fba1453aabe040a66fb852a8.png
[image 1]: /images/20230601/f66ef51464dd4d0fbfb054045c15f5ca.png
[image 2]: /images/20230601/178802ee8377450f9bf437bad8c53c51.png
[image 3]: /images/20230601/979a8bef88d44ddcab622c0e1e69ef82.png
[image 4]: /images/20230601/32784cac53c14fc79cb16d1c716fd533.png
[image 5]: /images/20230601/887df5f0b8dd440f846798d35c5986ad.png
[image 6]: /images/20230601/77c19f6089c64b1cb161dcefd908898b.png
[image 7]: /images/20230601/45a0486f61fc435d9df917894c99dfa8.png
[image 8]: /images/20230601/7a8fa88313d24b16a608b69096577cad.png
[image 9]: /images/20230601/2885dd10f5504878aed9800e8ebafc9c.png
[image 10]: /images/20230601/81c9651e7cf64773975ce263d2788b1b.png
[image 11]: /images/20230601/721be79a62e2470a99ab4c19f4d3a713.png
[image 12]: /images/20230601/cac0fd3e92f3441fab4aa4fa698965e1.png
[image 13]: /images/20230601/4915a236e2c846adb4ed00f43a6fbce5.png
[image 14]: /images/20230601/5a3f749ce584459c92deca19744e0ecf.png
[image 15]: /images/20230601/6ad476a3e155469e9703740805c97a45.png
[image 16]: /images/20230601/b2b46ee7debe47d5a9443d39f7613fdf.png
[image 17]: /images/20230601/a01e1f27da7f425ebb5cd8479bbad98f.png
[image 18]: /images/20230601/380e697fdb85487d8fab4136e50b89e8.png
[image 19]: /images/20230601/30709bf86cf94ec98ecd8964f6b5f072.png
[image 20]: /images/20230601/d544d295cba34d5b89f120d8e98b95c5.png
[image 21]: /images/20230601/fcce3ba1fe954763bcb7f7934be15cca.png