前端安装vue

188 阅读2分钟

1、下载node.js

官网:nodejs.org/en/download…

历史版本:nodejs.org/en/download…

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

image.png

4、安装vue

cnpm install vue -g

5、创建新的vue项目

5-1 建一个空目录文件夹

image.png

5-2 cmd命令进入改文件夹底下

image.png

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:{
    	#过滤器
 	}
})