vue项目开发实战（一）——vue项目起航

小组进行一个在线客服系统的开发任务，我这边主要是负责前端的，正好学习一波新技术

环境搭建

安装npm

直接在官网上下载
安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

大概就是一个打包工具

cnpm install webpack -g

安装vue-cli脚手架

npm install vue-cli -g

项目配置

进入需要新建项目的文件夹

vue init webpack <projectname>

接下来会进行一些项目信息的输入，然后进入项目文件夹再运行提示的命令

npm install
npm run dev

现在应该可以看到一个vue的页面了，值得一提的是如果在项目中进行修改的话这边也是会实时进行更新的，但是这里涉及到一个run dev 和run build的问题，之后再讨论

.
├── build/                      # 打包生成的文件，开始可能没有
│   └── ...
├── node_modules/               # 一些项目依赖的包
│   └── ...
├── src/
│   ├── main.js                 # 入口文件
│   ├── App.vue                 # vue的入口组件
│   ├── components/             # vue组件的位置
│   │   └── ...
│   └── assets/                 # 一些静态资源
├── index.html                   #入口网页文件
├── webpack.config.js            # webpack打包和开发的一些配置  
├── ...                         

有说法说应该还有一个static文件夹，但是我这边可能还没有引入vuex或者其他原因并没有看到这个文件夹，好在不影响目前的开发进程

项目结构

简单介绍一下我在这段时间的vue学习中对整个项目的理解

main.js

入口文件，用于为整个项目import一些项目依赖的库诸如vuex和vue-router等等，并且为网页定义了一个vue实例

App.vue

可以理解为main.js中定义的vue实例对应的组件，这个组件是最外层的框架，之后自己实现或是从第三方引入的组件都作为app的子组件被使用

index.html

用于渲染组件的网页

所以我们需要做的就是在component路径下设计自己的组件，并作为子组件在需要的时候出现在网页中

简单的例子

先以一个打开网页直接被渲染出来的组件的开发为例子

使用VS Code进行开发，安装了Vetur插件

在component目录下新建一个vue文件，文件分为三部分

xxx.vue
<template>          #这里写html
    <div id="xxx">  #一般用一个div作为组件最外层框架
                    #id就是组件名称
    </div>
</template>

<script>            #这里写js
export default{
    data(){
        return{

        }
    }
}
</script>           #这里写css样式

</style>

在具体的组件开发前，我们先将其作为子组件加入到App.vue中，打开App.vue

App.vue
<template>
    <div id="app">
        <xxx></xxx>     #xxx就是组件的id，下同
    </div>
</template>
<script>
import xxx from './component/xxx.vue'
export default{
    components:{xxx},
    ...
}
</script>
<style>
</style>

现在npm run dev，打开浏览器的调试功能应该就能找到网页中出现了一个id为xxx的div了，虽然可能什么都没有，这说明你的组件已经成功加入网页中，接下来就愉快的设计这个组件吧

关于具体的组件开发强烈建议去vue官网进行学习