vue 新建项目流程
1. 下载node,安装直接下一步操作就按装完成,在cmd命令行查看node -v版本和npm -v版本(node安装完成时就安装了npm)。
2.输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,安装淘宝镜像安装相关依赖
3.新建vue项目目录,(进入某盘符直接盘符加冒号,例如e: 进入e盘,进入新建vue项目目录,cd 进入某文件夹)
4.安装vue-cli脚手架构建工具,输入命令 npm install -g vue-cli,安装完成即可
5.用脚手架新建工程目录 vue init webpack +项目名称(在控制台输入CHCP 65001,按回车键即可将编码格式设成utf-8,再创建就不会乱码了)
解决乱码(自己感觉这一步没什么关系)
6.接下来就是询问项目的相关配置。一路yes省事儿没啥问题(会需要一段时间)
7.cd 工程名,进入到新建的项目目录文件夹下面
8.运行项目,指令npm run dev 看到如下提示就运行成功了 ,在浏览器中输入localhost:8080就可以看到运行结果
以上大致流程如下:
vue项目大致结构
小案列:main.js
import Vue from 'vue'
// Vue.component('my-header', {
// template: '<p>this is my header</p>'
// })
var myHeaderChile = {
template: '<p> i am header child</p>'
}
// eslint-disable-line
var myHeader = {
template: '<p>this is my header <my-header-child></my-header-child></p>',
components: {
'my-header-child': myHeaderChile
},
data: function () { // 组件中的data需要是function来return我们所需要的数据,以免有一个组件数据改变影响其他相同组件的数据
return {
d: 1,
f: 2
}
}
}
/* eslint-disable no-new */
new Vue({
el: '#app',
data: {
word: ' hello world! '
},
components: {
'my-header': myHeader
}
})
运行结果:
如何引入外部组件:
main.js
import Vue from 'vue' // 从node-module引入的vue实例
import App from './App' // 当前目录中引入的app跟组件
new Vue({
el: '#app',
data: {
word: ' hello world! '
},
// render: h => h(App)
render: function (h) { // vue2.0引入外部的组件必须使用render函数进行渲染
return h(App)
}
})
App.vue
<template>
<div>
{{hello}}
</div>
</template>
<script>
export default {
data () {
return {
hello: 'world2'
}
}
}
</script>
运行结果
9.简述用脚手架(vue-cli)建立项目的优点
- 成熟的vue项目架构设计
- 本地测试服务器
- 集成打包上线方案
使用vue-cli系统要求
- Node.js(大于或等于4.X)
- git(用于下载代码)
- 一个可以使用node命令的终端