基于vue-cli项目开发的相关内容

最新推荐文章于 2024-06-17 06:00:00 发布

Ai-leen

最新推荐文章于 2024-06-17 06:00:00 发布

阅读量187

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/weixin_38144989/article/details/90752081

前端基础专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何使用node.js和vue-cli脚手架快速搭建Vue项目，包括安装依赖、配置scss和axios，以及设置vuex状态管理。适用于初学者和需要快速启动项目的开发者。

一、脚手架下载及运行
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基于node.js,利用淘宝npm镜像安装相关依赖
在cmd里直接输入：npm install -g cnpm –-registry=https://registry.npm.taobao.org，回车，等待安装…
3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
在cmd里
1)输入：cnpm install -g vue-cli，回车，等待安装…
2).输入：vue，回车，若出现vue信息说明表示成功
4.创建项目
在cmd里输入：vue init webpack zzy(项目文件夹名)，回车
5.安装依赖
在cmd里
1).输入：cd zzy（项目名），回车，进入到具体项目文件夹
2).输入：cnpm install
项目文件夹多了一个node_modules文件夹
6.测试环境是否搭建成功
方法1：在cmd里输入：cnpm run dev
二、scss配置
1.安装

npm install node-sass --save-dev
npm install sass-loader --save-dev

2.打开webpack.base.config.js在loaders里面加上

 {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }

3.在需要用到scss的地方写上

<style lang="scss" scoped></style>

三、axios配置
1.安装

npm install axios --save

2.在main.js里引用axios

import axios from 'axios'
Vue.prototype.$axios=axios

3.在模板中使用axios

this.$axios.get('url',{
    params: {
      ID: 12345
    }
  }).then(function(res){
  	console.log(res.data);
  });

四、vuex配置
1.安装

npm install vuex --save

2.在src下新建store文件夹，新建index.js,写入

import Vue from 'vue'
import Vuex from 'vuex' 
Vue.use(Vuex)
const state = {
	count: 20
}
export const mutations = {
	increment(state) {
		return state.count++
	}
}
const store = new Vuex.Store({
	state,
	mutations
})
export default store

3.在main.js里引入store/index.js

import store from "./store"
new Vue({
  el: '#app',
	router,
	store,
  template: '<App/>',
  components: { App }
})