1. Node.js 1.1 介绍： - Node.js 是一个JavaScript运行环境，实质上是对Chrome V8引擎的封装。 - Node.js 不是一个 JavaScript 框架，不同于Django。Node.js 更不是前端的库，不能与 jQuery、ExtJS 相提并论。 - Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 1.2 安装： 直接去官网下载安装 https://nodejs.org/en/ 1.3 运行测试 开始 -> 运行 -> cmd -> Enter 查看版本：node --version 打开：node 测试：console.log('Hello node') 退出：.exit2. npm 2.1 介绍 任何计算机编程语言都包含了丰富的第三方库，比如Python，pip是python的第三方库管理工具。而npm是JavaScript这么语言的第三方库管理工具。 2.2 检测 装好node.js之后，默认已经安装好了npm包管理工具。可以输入npm命令机械能测试。 2.3 基本命令 - 初始化： npm init --y - 安装： 全局：npm install -g <package> 局部： npm install <package> --save npm install <package> --save-dev - 卸载 全局：npm uninstall <package> -g 局部： npm uninstall <package> -S npm uninstall <package> -D3. vue-cli 3.1 安装 npm install -g vue vue-cli 3.2 新建项目 3.2.1 初始化 vue init webpack mydemo 3.2.2 根据提示输入： Project name mydemo ? Project description A ? Author ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? 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) npm 3.2.3 根据提示启动 cd mydemo npm run dev 3.3 运行 I Your application is running here: http://localhost:8080 浏览器访问127.0.0.1:80804. vuex 4.1 安装使用 - 第一步：Vue中使用Vuex Vue.use(Vuex); - 第二步：实例化一个store对象 let store = { state:{ name:'python', }, }; - 第三步：通过计算属性来获取store对象中的数据 let App = { template:` <div> <h1>{{ name }}</h1> </div> `, computed:{ name(){ return this.$store.state.name }, }, }; - 第四步：注册到根实例当中 new Vue({ el:"#app", template:`<App/>`, components:{ App, }, store:store, ); 4.2 getters：获取 let store = new Vuex.Store({ state: { name: '子牙', age:22, }, getters:{ getAge(state){ return state.age + 10 } }, }); let App = { template: ` <div> <h1>{{ name }}</h1> <h1>{{ age }}</h1> </div> `, computed:{ name(){ return this.$store.state.name; }, age(){ return this.$store.getters.getAge; }, }, }; 4.3 mutations：修改 let store = new Vuex.Store({ state: { name: '子牙', age: 22, score: 88, }, getters:{ getAge(state){ return state.age + 10 } }, mutations:{ changeScore(state,payload){ this.score += payload } }, }); let App = { template: ` <div> <h1>{{ name }}</h1> <h1>{{ age }}</h1> <h1>{{ score }}</h1> <button @click="changeScore">点击修改分数</button> </div> `, computed:{ name(){ return this.$store.state.name; }, age(){ return this.$store.getters.getAge; }, score(){ return this.$store.state.score; } }, methods:{ changeScore(){ this.$store.commit('changeScore',2) } } }; 4.4 actions: let store = new Vuex.Store({ state: { name: '子牙', age: 22, score: 88, }, getters:{ getAge(state){ return state.age + 10 } }, mutations:{ changeScore(state,payload){ this.score -= payload }, addScore(state,payload){ this.score += payload }, }, actions:{ addScore(context,payload){ setInterval(() => context.commit('addScore',payload),3000); } }, }); let App = { template: ` <div> <h1>{{ name }}</h1> <h1>{{ age }}</h1> <h1>{{ score }}</h1> <button @click="changeScore">点击修改分数</button> <button @click="addScore">点击增加分数</button> </div> `, computed:{ name(){ return this.$store.state.name; }, age(){ return this.$store.getters.getAge; }, score(){ return this.$store.state.score; } }, methods:{ changeScore(){ this.$store.commit('changeScore',2) }, addScore(){ this.$store.dispath('addScore',1) } } };
来源：https://www.cnblogs.com/xjmlove/p/10268144.html