使用webstorm搭建vue-cli项目

前⾔

随着vue在前端不断的壮⼤起来，越来越多的前端⼯程师使⽤vue了，作为⼤型项⽬的开发，vue-cli是不⼆之选，所以这篇博客是为搭建vue-cli所写，想要搭建vue-cli项⽬就必须先有git,node.js,webpack,等⼯具，这些⼯具的内容我就不提供了，⽹上的教程也⼀⼤堆，在这⾥我就默认你已经安装了这些内容。git地址：node.js地址：

本章⽬标

　学会使⽤webstorm搭建vue-cli项⽬

项⽬搭建

然后下⾯这⼀段可能会⽐较久

是否选择vue-router，这⾥我们选择是，待会后⾯会⽤到

是否使⽤eslint检查，这⾥我们选择否

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

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

是否使⽤npm包管理器

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

假如您的⽹速⽐较慢的话，我们可以在控制台中输⼊ cnpm install

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

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

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

项⽬⽬录:

|-- 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,结构如下:

ComponentA代码如下：

ComponentB代码如下：

ComponetC代码如下：

三个组件构建完成之后，我们修改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中的相关内容，代码如下：

最后⼀步，也是最重要的⼀步，⼩编⾃⼰也会经常犯这个错误,我们需要修改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: ''　　//重点})

运⾏结果：

点击组件A:

点击组件B:

点击组件C:

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

总结

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