前言

随着vue在前端不断的壮大起来，越来越多的前端工程师使用vue了，作为大型项目的开发，vue-cli是不二之选，所以这篇博客是为搭建vue-cli所写，想要搭建vue-cli项目就必须先有git,node.js,webpack,等工具，这些工具的内容我就不提供了，网上的教程也一大堆，在这里我就默认你已经安装了这些内容。

git地址：https://git-scm.com/

node.js地址：http://nodejs.cn/

本章目标

  • 　学会使用webstorm搭建vue-cli项目

项目搭建

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

是否选择vue-router，这里我们选择是，待会后面会用到

是否使用eslint检查，这里我们选择否

是否选择单元测试，这里我们也选择否

是否选择e2e测试，这里我们选择是

是否使用npm包管理器

然后项目就搭建完成了，接下来我们需要选择安装包

假如您的网速比较慢的话，我们可以在控制台中输入 cnpm install

当所有安装包下载完成之后我们就可以启动我们的项目了

在地址拦输入http://localhost:8088，如何出现如下界面，那么恭喜你搭建成功了

接下来，我们对vue-cli中的各个项目进行分析，方便我们以后的开发中能够更好的进行管理

项目目录:

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

测试案例

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

ComponentA代码如下：

  1. <template>
  2.     <div>
  3.       <h1>{{msg}}</h1>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     name: 'ComponentA',
  10.     data(){
  11.       return{
  12.         msg:'这是组件A',
  13.       }
  14.     }
  15.   }
  16. </script>
  17.  
  18. <style scoped>
  19.   h1{
  20.     color: red;
  21.   }
  22. </style>

ComponentB代码如下：

  1. <template>
  2.     <div>
  3.       <h1>{{msg}}</h1>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     name: 'ComponentB',
  10.     data(){
  11.       return{
  12.         msg:'这是组件B',
  13.       }
  14.     }
  15.   }
  16. </script>
  17.  
  18. <style scoped>
  19.   h1{
  20.     color: yellow;
  21.   }
  22. </style>

ComponetC代码如下：

  1. <template>
  2.     <div>
  3.       <h1>{{msg}}</h1>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     name: 'ComponentC',
  10.     data(){
  11.       return{
  12.         msg:'这是组件C',
  13.       }
  14.     }
  15.   }
  16. </script>
  17.  
  18. <style scoped>
  19.   h1{
  20.     color:blue;
  21.   }
  22.  
  23. </style>

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

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Hi from '@/components/HiComponent'
  4. import A from  '@/components/ComponentA'
  5. import B from  '@/components/ComponentB'
  6. import C from  '@/components/ComponentC'
  7. Vue.use(Router)
  8.  
  9. export default new Router({
  10.   routes: [
  11.     {
  12.       path: '/',
  13.       name: 'hi',
  14.       component: Hi,
  15.     },
  16.     {
  17.       path: '/a',
  18.       name: 'A',
  19.       component: A,
  20.  
  21.     },
  22.     {
  23.       path: '/b',
  24.       name:'B',
  25.       component:B,
  26.     },
  27.     {
  28.       path:'/c',
  29.       name:'C',
  30.       component:C,
  31.     }
  32.   ]
  33. })

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.     <title>project_03</title>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <ul>
  11.         <li>
  12.           <a href="#/a">这是组件A</a>
  13.         </li>
  14.         <li><a href="#/b">这是组件B</a></li>
  15.         <li><a href="#/c">这是组件C</a></li>
  16.       </ul>
  17.       <!--router-view主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。-->
  18.       <router-view></router-view>
  19.     </div>
  20.     <!-- built files will be auto injected -->
  21.   </body>
  22. </html>

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

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import router from './router'
  5. Vue.config.productionTip = false
  6.  
  7. /* eslint-disable no-new */
  8. new Vue({
  9.   el: '#app',
  10.   router,
  11.   components: {},//重点
  12.   template: ''　　//重点
  13. })

运行结果：

点击组件A:

点击组件B:

点击组件C:

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

总结

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

使用webstorm搭建vue-cli项目的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

  3. Spring Boot +Vue 项目实战笔记（一）：使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  4. 使用Vue-cli3搭建Vue+TypeScript项目

    一,创建项目 使用 npm 安装 vue-cli 3 和typescript npm i -g @vue/cli typescript 使用vue create命令快速搭建新项目的脚手架 vue cr ...

  5. 使用webstorm 搭建 vue 开发环境

    一.首先安装 node.js 安装成功后在cmd里面使用:node -v 命令查看安装是否成功 下载链接: 链接:https://pan.baidu.com/s/1CL9J4Ryp3sL0zPYKJy ...

  6. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  7. 用webstorm搭建vue项目

    本文只针对新手. 首先要明白几个名词(概念). Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 ...

  8. angular2.0入门---webStorm创建angular CLI项目

    创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...

  9. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  10. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

随机推荐

  1. ZOJ 3953：Intervals（优先队列+思维）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5572 题意:给出n个线段,问最少删除几个线段可以使得任意一个点不会被三个以上的 ...

  2. c++指针经典题目分析

    首先看一下题目,下列程序会在那一行崩溃,程序如下: #include<iostream> using namespace std; struct S{ int i; int *p; }; ...

  3. Node热部署插件

    一.supervisor 首先需要使用 npm 安装 supervisor(这里需要注意一点,supervisor必须安装到全局) $ npm install -g supervisor Linux ...

  4. 零基础ASP.NET Core WebAPI团队协作开发

    零基础ASP.NET Core WebAPI团队协作开发 相信大家对“前后端分离”和“微服务”这两个词应该是耳熟能详了.网上也有很多介绍这方面的文章,写的都很好.我这里提这个是因为接下来我要分享的内容 ...

  5. Bzoj 1537: [POI2005]Aut- The Bus 题解 [由暴力到正解]

    1537: [POI2005]Aut- The Bus Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 387  Solved: 264[Submit][S ...

  6. Zeppelin 0.6.2使用Spark的yarn-client模式

    Zeppelin版本0.6.2 1. Export SPARK_HOME In conf/zeppelin-env.sh, export SPARK_HOME environment variable ...

  7. 【HDU - 3533】Escape（bfs）

    Escape  Descriptions: 一个人从(0,0)跑到(n,m),只有k点能量,一秒消耗一点,在图中有k个炮塔,给出炮塔的射击方向c,射击间隔t,子弹速度v,坐标x,y问这个人能不能安全到 ...

  8. 在 .h 和 cpp 中查找 :grep consume ~/test/2016/AMQP-CPP/**/*.cpp ~/test/2016/AMQP-CPP/**/*.h -r

    :grep consume ~/test/2016/AMQP-CPP/**/*.cpp ~/test/2016/AMQP-CPP/**/*.h -r -w "whole" 匹配整个 ...

  9. Vincent的城堡

    \(\mathcal{Description}\) \(\mathcal{Solution}\) 除去前k部分,后面的是随便怎么选的所以后面的就是\((n-k)^{n-k}\)种方案 前k部分,由于k ...

  10. c语言进阶4-有返回值函数

    一.         从函数返回 从函数返回就是返回语句的第一个主要用途.在程序中,有两种方法可以终止函数的执行,并返回到调用函数的位置.第一种方法是在函数体中,从第一句一直执行到最后一句,当所有语句 ...