Vue环境搭建

node npm安装（适合于Liunx系统）

下载node.js

node官网： https://nodejs.org/en/，并将下载好的node压缩包解压并改名为node

解锁文件夹

使用sudo chmod -R 777 文件夹的命令解锁usr下的local文件夹

移动node文件夹至local目录下

创建node及npm软连接实现全局调用
将下列代码在终端输入即可,软连接一行一行输入验证即可

sudo ln -s /usr/local/node/bin/node /usr/local/bin/
sudo ln -s /usr/local/node/bin/npm  /usr/local/bin/

查看版本

安装cnpm(适用于Liunx系统)

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
sudo ln -s /usr/local/node/bin/cnpm  /usr/local/bin/cnpm

安装nodemon(适用于Liunx系统)

sudo cnpm install -g  nodemon

sudo ln -s /usr/local/node/bin/nodemon  /usr/local/bin/nodemon

安装vue(适用于Liunx系统)

vue-cli的版本:2.96

sudo cnpm install -g vue-cli
sudo ln -s /usr/local/node/bin/vue  /usr/local/bin/vue

码云的使用

注册码云账号

创建仓库（项目）

安装git(适合Liunx系统)

安装git 是为了让线上与线下的代码同步

	sudo  apt-get install git
	sudo ln -s /usr/local/node/bin/git  /usr/local/bin/

ssh公钥

ssh公钥是为关联线上与线下的代码

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"  
# Generating public/private rsa key pair...

cat ~/.ssh/id_rsa.pub
# ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc....

线上的代码克隆到本地

创建vue项目

sudo cnpm install -g vue-cli
vue init webpack travel

码云之代码同步

• git status：查看项目的状态情况

• git add . :将文件添加到git的缓存区

• git commit -m’project’ (其中project一般写成要提交的项目的备注)

• git push ：上传文件到码云

Vue项目文件夹介绍

• README.md 项目说明

build目录

build目录存放的是webpack的相关配置文件

• build.js：生产环境构建文件；
• chedk-versions.js：版本检查（node,npm）；
• utils.js：构建相关工具；
• vue-loader.conf.js：CSS加载器配置；
• webpack.base.conf.js：webpack基础配置；
• webpack.dev.conf.js：webpack开发环境配置；
• webpack.prod.conf.js：webpack生产环境配置；
• dev-client.js：开发服务器的热重载（用于实现页面的自动刷新）；
• dev-server.js：构建本地服务器（npm run dev 即运行它）；

config目录

config目录存放的是vue的配置文件

• dev.env.js：项目开发环境配置文件；
• index.js：项目主要配置（包括监听端口、打包路径等）；
• prod.env.js：项目生产环境配置；

src目录

src目录存放的是我们开发项目的源代码文件

• assets目录：存放项目静态资源文件（如：css、图片等）；
• components目录：项目公共组件目录；
• router目录：项目路由配置文件目录；
• App.vue：项目根组件文件；
• main.js：项目入口文件；

Vue项目初始化

移动端视口代码

index.html写入移动端视口必备代码

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

reset.css

reset.css:重置样式表，使不同的浏览器下的样式保持一致

使用步骤

• 第一步：将reset.css引/src/assets/style文件夹中
• 第二步：main.js引入reset.css

border.css

border.css

border.css是为了解决移动端1px的问题（适用于多倍图）

使用步骤

• 第一步：将border.css引/src/assets/style文件夹中
• 第二步：main.js引入border.css

fastclick

fastclick:是为了解决移动端点击事件延迟300ms的问题

使用方法

• 第一步：cnpm install fastclick --save
• 第二步：main.js引入fastlick模块

fastClick.attach(document.body)

iconfont

iconfont:阿里巴巴矢量图

使用方法

第一步：注册账号
第二步：资源管理-------> 新建项目

同步代码之码云

第一步：git status：查看项目的状态情况

第二步：git add . :将文件添加到git的缓存区

第三步：git commit -m’project’ (其中project一般写成要提交的项目的备注)

第四步： git push ：上传文件到码云

首页Header区域之开发