1.安装 Node.js
(1)官网下载并安装 Node.js
(2)查看 Node.js 的版本号,检查是否安装成功
node -v
(3)安装 Node.js 会自带 npm(包管理工具),检查npm版本号命令如下
npm -v
2.安装 cnpm(npm国内镜像)
(1)安装 cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
(2)查看 cnpm 版本号,检查是否安装成功
cnpm -v
3.安装 webpack(前端打包工具)
(1)安装 webpack
cnpm install webpack -g
(2)查看 webpack 版本号,检查是否安装成功
webpack -v
查看 webpack 版本号时会提示你是否安装webpack-cli,输入yes,安装webpack-cli即可
4.安装 vue-cli(脚手架构建工具)
(1)安装 vue-cli
cnpm install vue-cli -g
(2)查看 vue-cli 版本号,检查是否安装成功
vue -V
备注:注意这里是大写的"V"
上述步骤就是对Vue项目的环境搭建,接下来我们就可以使用 vue-cli 脚手架工具进行Vue项目的构建了。
1.创建项目
(1)在项目目录下,执行创建命令
vue init webpack ProjectName(项目名称)
(2)创建项目过程中,需要对项目名称、描述、作者等信息进行确认或者填写,案例如下
2.安装项目所需的依赖
(1)cd命令进入到项目的路径下,再执行命令
npm install
(2)运行项目
npm run dev
项目启动后会返回一个地址,将地址拷贝到浏览器地址栏,出现vue官网的欢迎页面,则一个Vue项目构建完成了。
(3)项目的目录和文件结构
3.小试牛刀 - 编写HelloWorld!
(1)在component目录下新建一个VueDemo.vue文件
<template>
<div>
<h1>{{hello}}</h1>
</div>
</template>
<script>
export default {
name: 'VueDemo',
data() {
return {
hello: 'Hello World!'
}
},
}
</script>
(2)在router/index.js文件中对组件进行路由配置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VueDemo from '@/components/VueDemo'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/hello',
name: 'VueDemo',
component: VueDemo
},
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
(3)运行项目测试结果
在终端输入 npm run dev 命令运行项目,会返回一个地址,在浏览器中访问改地址,结果如下
4.打包上线
npm run build
说明:打包完成代码位于dist文件夹下
以上就是Vue项目的创建和基本使用,后续将会继续学习Vue的相关知识,并将学习过程中的收获和心得总结分享出来。