node和npm的安装
- node自带npm 搜索下载安装合适的版本
- 安装好之后 打开查看node版本 node -v 比如下图这样
3.查看npm版本 npm -v 比如下图这样
也可以下载vscode 带node的版本 可以直接在编辑器中操作终端(本人就是如此,很方便)
vue-cli安装和新建vue项目
1.npm install -g vue-cli (-g表示全局安装)
2.vue init webpack vue-project-name (初始化vue项目,项目名称自定义)
3.之后回车 会出现一些信息需要填写 按照实际填写就行(关于eslint 根据个人代码习惯决定是否需要)
4.建好之后验证下项目是否创建成功 cd到项目目录 然后执行npm run dev
5.初始化好之后 在浏览器打开对应的地址 默认是http://localhost:8080/ 如果端口被占用 可以在config/index.js 中修改host和port 然后重新npm run dev即可 能打开页面就说明创建成功了
vuex安装配置
- 项目根目录运行 npm install vuex -S
- 在src/main.js配置vuex
//引入store
import store from './store'//此处新加的
new Vue({
el: '#app',
store,//此处新加的
components: { App },
template: '<App/>'
})
3.src目录新建store文件夹,新建5个js 此处把vuex分成了5个文件
内部具体使用逻辑以后在分享
axios 安装
1.根目录下 执行 npm install axios -S
2.在src/main.js配置 axios
//引入axios
import axios from 'axios'//此处新加的
Vue.prototype.$axios = axios;//此处新加的
new Vue({
el: '#app',
store,
axios,//此处新加的
components: { App },
template: '<App/>'
})
具体使用以后在分享
vue-router安装
1.vue-router是一个插件包,需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装,也可以自己使用命令安装:npm install vue-router --save
2.用vue-cli构建项目之后,在src/router/index.js文件中 配置如下
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件,命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定义路由配置
export default new Router({
routes: [ //配置路由,这里是个数组,放置路由对象
{ //每一个都是一个对象
path: '/', //路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //上面import引入的对应的组件模板
}
]
})
3.在main.js中也需要引入router
// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置--此处新加的
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
new Vue({
el: '#app',
router,//引入路由配置--此处新加的
store,
axios,
components: { App },
template: '<App/>'
})
至此 vue全家桶需要的工具和依赖大致安装完成 具体的使用 下次再分享