Vue项目实战入门

Vue项目实战入门 第一天

使用vue创建项目，大体分为以下几步：

• 使用vue脚手架创建项目基本框架
• 安装插件
• 设置项目的目录结构
• 配置代理
• 设置模块结构
• 配置路由
• 具体开发

下面来分别介绍

使用vue脚手架创建项目基本框架

使用vue开发项目，首先需要在系统中安装node.js，然后使用npm安装工具安装相关插件，

第一步

node.js 下载

第二步

安装vue-cli（vue脚手架）

npm install vue-cli -g  

其中-g 表示全局安装，全局安装的好处是在任意一个目录打开cmd，都可以运行vue命令

第三步

使用脚手架创建vue项目
使用vue脚手架创建的项目分两种，一种是webpack项目，一种是webpack simple项目，webpack项目使用于大型的项目，webpack配置文件修改起来比较方便，可配置项比较多，如果对webpack不熟悉的话，也会比较好修改
webpack simple项目把webpack 配置项压缩在一个文件里，如果是做测试，demo，练习用就够用了
命令如下：

vue init webpack test-demo //test-demo 是项目名称
vue init webpack-simple test-demo-simple   //test-demo-simple：项目名称

这个过程中，系统会有一些交互，询问您对项目的具体要求，根据情况按回车就行
具体可参考 简书 玄木的文章 ，
其中eslint 建议大家安装，用来规范编码格式是再好不过的了
vue-router是必须要安装的

安装插件

第一步

切换当前目录

cd test-demo    //这一步，如果不需要安装其他插件，目前vue的版本，不需要执行
npm  install    //同上

第二步

安装其他插件
一般，我们还需要安装以下插件 ，关于 ajax，css
ajax官方建议使用axios

npm install axios  --save 

css建议使用sass

npm install sass node-sass sass-loader --save-dev

设置项目的目录结构

其他 node_mudules是插件的安装目录，不要动
build && config是 webpack 配置的目录，
src 是我们的开发目录
src/assets 放置公共的样式文件，图片和js脚本
src/component 一般放置我们的模块，具体模块可以再细分子文件夹
src/router 放路由配置文件
src/store 放vuex 配置文件（可选）
static 放一些静态图片

配置代理

什么情况下需要配置代理呢？当前后端完全分离的时候，前端程序员只负责前端开发，不需要配置后台环境，所有的数据都通过ajax向后台发请求，后台接口一般配置在后台的服务器上，如果直接请求就会存在跨域问题，
这时候就需要配置代理了
代理配置在 config / index.js文件中，

其中，share 是项目的名称，target 是后台服务器

设置模块结构

设置模块结构，也就是目录结构，是非常重要的，在系统开始之初，就要根据系统的详细设计，分析出系统大概分哪些页面，之间的关系是怎样的，一般来说一个页面就是一个模块，如果页面比较复杂的话，每个页面还要再分子模块，此外还有公共模块，这些模块该怎么放才能在引用的时候，不会乱，都是需要仔细设计的。