一.构建vue.js项目
1. 安装node
https://nodejs.org/en/
下载完成后，下一步–>下一步–>安装完成
验证node是否安装成功:
打开命令行(windows)或终端(mac),在命令行(终端)中输入：
node -v 如果提示出版本信息则说明node安装成功
npm -v 如果提示出版本信息则说明npm安装成功
2. 安装vue脚手架: vue-cli
sudo npm install vue-cli -g
(-g全局安装，全局安装即就将当前的工具安装在了node的安装目录下)
验证vue-cli是否安装成功:
在终端输入vue -V 如果提示出版本信息则说明vue-cli安装成功
3. 创建项目
新建一个存放项目的文件夹，在该文件夹下打开终端
通过下面的简单的Linux命令进入到指定的文件夹：
ls 列出当前所在目录下的所有文件及文件夹
cd xxx 进入到当前目录下的指定的文件夹
cd …返回上一级目录
在指定文件夹下打开终端后，在终端中输入：
sudo vue init webpack my-project
(webpack是官方模版,my-project是自定义的项目名称)
4.下载安装项目依赖
如果在拉取模版时没有下载安装依赖，则需要执行如下操作
1）进入项目所在的项目文件夹
cd my-project
2）通过下面的命令安装依赖：
sudo cnpm install
5.运行项目
在项目文件夹下打开终端,运行下面的命令
npm run dev
**自动打开浏览器问题**
在根目录下找到config文件下的index.js文件，
找到开发环境下的autoOpenBrowser改为true就可以了
二.项目实战–准备工作
- 需求分析
- 项目资源准备(图片/图标字体制作IcoMoon)
- 项目目录设计
- mock数据准备
- css初始化
5.1 在static下创建css文件夹,添加reset.css文件
参考:
1.Eric Meyer’s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset)
2.http://cssreset.com
5.2 在index.html文件中,用标签引入reset.css - 移动端视口设置(移动端项目需要设置)
在index.html文件中,通过标签设置如下:
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
- 在VSCode中添加.vue模版
三.项目实战–页面骨架开发 - 划分模块
- 拆分组件
