内容概要:
-
Vue介绍
-
安装Vue
一、Vue介绍
Vue是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层。是一个单页面框架,是基于模块化组件化的开发模式。
二、安装Vue
1. 安装node.js
nodejs目前使用nodejs最多的场景是前端构建工具,比如webpack、gulp。而Vue的组件要编译势必要借助webpack,所以肯定要提供npm的安装方式。目前Vue版本为2.5.x,配合nodejs的8.13.x版本使用。所以,我们安装一下nodejs8.14版本
1.1 windows上安装node.js
安装包(.msi)方式安装:
64位安装包下载地址:https://nodejs.org/dist/latest-v8.x/node-v8.14.0-x64.msi
二进制文件(.exe)方式安装:
64位安装包下载地址:https://nodejs.org/dist/latest-v8.x/win-x64/node.exe
安装完后通过以下命令检查是否安装成功:
node --version
1.2 Linux上安装node.js
直接使用已编译好的包:
Node 官网已经把 linux 下载版本更改为已编译好的版本了,我们可以直接下载解压后使用:
# wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载 # tar xf node-v10.9.0-linux-x64.tar.xz // 解压 # cd node-v10.9.0-linux-x64/ // 进入解压目录 # ./bin/node -v // 执行node命令 查看版本 v10.9.0 #找到对应的版本即可
CentOS下源码安装Node.js
1.下载源码,你需要在https://nodejs.org/en/download/下载最新的Nodejs版本,本文以v0.10.24为例: cd /usr/local/src/ wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz 2.解压源码 tar zxvf node-v0.10.24.tar.gz 3.编译安装 cd node-v0.10.24 ./configure --prefix=/usr/local/node/0.10.24 make make install 4.配置NODE_HOME,进入profile编辑环境变量 vim /etc/profile #set for nodejs export NODE_HOME=/usr/local/node/0.10.24 export PATH=$NODE_HOME/bin:$PATH 5.使其脚本生效 source /etc/profile 6.验证是否安装配置成功 node -v
2.搭建Vue的开发环境
2.1 安装Vue的脚手架工具(命令行工具)
#全局安装 vue-cli
npm install --global vue-cli
2.2 创建项目
#创建一个名为my-project的vue项目
vue init webpack my-project
#安装依赖包,必须要cd到项目里进行安装
cd my-project
npm install
#启动项目
npm run dev
-------------------- 注意 --------------------
在创建项目时还有一种方式,就是 vue init webpack-simple my-project
-------------------- 区别 --------------------
1.webpack-simple没有vue-router的中间件,
2.webpack-simple没有格式的检测
3.webpack-simple是一个简单版的,和webpack的目录差别很大
4.webpack-simple默认没有安装css-loader,所以在引入assets中的静态文件css时,需要安装依赖style-loader与css-loader,然后在webpack.config.js中进行相关的配置
5.webpack-simple可以在index.html中引入文件,webpack不可以
在创建项目时所对应的步骤说明:
E: wue>vue init webpack zjk ? Project name zjk #项目的名称 ? Project description A Uue. js pro. ject #项目描述 ? Author #作者 ? Vue build <Use arrow keys) ? Vue build standalone ? Install vue-router? Yes #是否安装vue-router ? Vse ESLint to lint your code? No #是否使用ESLint来代替你的代码 ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run ' npm install' for you after the project has been created?<recommended)(Use arrow keys) Yes, use NPM Yes, use Yarn No,I will handle that myself
注意:
cnpm的说明: 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以我们乐于分享的淘宝团队做了这事。来自官网:"这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。" cnpm的安装: 官方网址:http://npm.taobao.org 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误 cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm