1、下载node.js
2、安装
安装尽量不要安装在c盘
2-1 设置下淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
2-2 设置缓存文件夹
npm config set cache "D:\nodejs\node_cache"
设置全局模块存放路径
npm config set prefix "D:t\nodejs\node_global"
设置成功后,之后用命令npm install XXX -g安装以后模块就在D:\nodejs\node_global里
3、查看下path的系统变量
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令
3-1 鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
3-2 修改系统变量path
4、安装vue
cnpm install vue -g
5、创建新的vue项目
5-1 建一个空目录文件夹
5-2 cmd命令进入改文件夹底下
5-3 开始执行vue命令
$ vue init webpack 项目名称
6、启动项目
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
6、vue.js简单实例说明
var detail = new Vue({
el: '#app',
directives: {},//钩子函数的用法,自定义指令
data: {
#数据属性
},
components:{}, #组件注册,自定义局部组件
props: {}, #父组件向子组件传递数据
mounted: function () {
#初始化
},
methods: {
#函数方法
},
computed: {
#computed中的函数必须用return返回最终的结果;属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
testFunction: function(){
return "";
}
},
#render渲染函数
render(h, context) {
const { icon, title } = context.props
const vnodes = []
if (icon) {
vnodes.push(<svg-icon icon-class={icon} />)
}
if (title) {
vnodes.push(<span slot="title">{title}</span>)
}
return vnodes
},
/**使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子: 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch
搜索数据**/
watch:{
#data里的数据属性监听 监听属性的变化
}
filters:{
#过滤器
}
})