Vue项目实战入门
Vue项目实战入门 第一天使用vue创建项目,大体分为以下几步:使用vue脚手架创建项目基本框架安装插件设置项目的目录结构配置代理设置模块结构配置路由具体开发下面来分别介绍使用vue脚手架创建项目基本框架使用vue开发项目,首先需要在系统中安装node.js,然后使用npm安装工具安装相关插件,第一步node.js 下载第二步安装vu...
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 是后台服务器
设置模块结构
设置模块结构,也就是目录结构,是非常重要的,在系统开始之初,就要根据系统的详细设计,分析出系统大概分哪些页面,之间的关系是怎样的,一般来说一个页面就是一个模块,如果页面比较复杂的话,每个页面还要再分子模块,此外还有公共模块,这些模块该怎么放才能在引用的时候,不会乱,都是需要仔细设计的。
更多推荐
所有评论(0)