用脚手架简单搭建vue开发环境

完成后目录展示:

component文件里放的是页面,parts放的是入口文件main.js需要引入的js依赖。

事先安装cnpm。然后用脚手架工具 vue-cli 来创建一个使用 vue-loader 的项目:

cnpm install -g vue-cli
vue init webpack-simple myvue
cd myvue
cnpm install

接下来安装vue-router和vuex

cnpm install vue-router vuex --save-dev

打开main.js,一开始是这个样子的:

一、引入路由router

在main.js里引入路由文件,然后挂载到vue实例上

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./parts/router.js‘

new Vue({
      el:‘#app‘,
    router,
    render: h => h(App)
})

在parts里面新建router.js文件,内容如下

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import routes from ‘./routes.js‘

Vue.use(VueRouter)
let router = new VueRouter({
    mode:‘history‘,
    scrollBehavior:()=>({y:0}),
    routes
})

export default router;

再新建routes.js文件,内容如下

import home from ‘../components/home.vue‘

export default[
    {
        path:‘/home‘,
        component:home
    }
]

这样vue-router就配置好了。

二、配置store

在parts目录里新建store.js文件,内容如下

import Vue from ‘vue‘
import Vuex from ‘Vuex‘

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{

    },
    getters:{

    },
    mutations:{

    },
    actions:{

    }
})

export default store;

然后在main.js里面引入

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./parts/router.js‘
import store from ‘./parts/store.js‘

new Vue({
      el:‘#app‘,
    router,
    store,
    render: h => h(App)
})

三、配置全局过滤器

在parts文件里新建filters.js,内容如下

import Vue from ‘vue‘

let filters = {
    aa(params){
        return params;
    }
}

var filtersKeyArr = Object.keys(filters);
filtersKeyArr.forEach(key => Vue.filter(key,filters[key]));

然后main.js里引入

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./parts/router.js‘
import store from ‘./parts/store.js‘
require(‘./parts/filters.js‘)

new Vue({
      el:‘#app‘,
    router,
    store,
    render: h => h(App)
})

这样就配置完成了。

时间: 2024-10-01 10:03:20

用脚手架简单搭建vue开发环境的相关文章

搭建vue开发环境的步骤,六步完成

搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn:注意是32还是64位:二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号. 三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:npm install --global

【原创】win10下搭建vue开发环境+IIS部署

[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

搭建vue开发环境的步骤

原文链接 vue现在在前端,相对于算是现在前端工程师都比较常用的框架之一,他和angular有一些相似之处,所以用过angular的伙伴们,再来学习vue应该不会感觉太难: 一:在搭建vue的开发环境之前,一定一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,网址:http://nodejs.cn: 二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 nod

使用vue-cli+webpack搭建vue开发环境

在这里我真的很开心,好久没有用过博客,今天突然看到了我的博客有不少人看过,虽然没有留下脚印,但是还是激起了我重新拿起博客的信心,感谢大家. 在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的 废话不多说,我们直接进入正题 下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境 git用的是linux命令 不要问为什么,能用就行,你说是不是? windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了g

windows下搭建vue开发环境实践

Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.2016年,Vue同Angular.React形成三足鼎立的局面.为了提升自己的知识面,今天实践操作一下Vue的环境搭建. 一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js.官方地址为:https://n

windows下搭建vue开发环境+IIS部署

特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装包,作者选择的是windows 64bit. 下载完毕,按照windows一般应用

搭建vue开发环境

vue 2.0 1.安装node 2.安装淘宝镜像,打开命令行工具,把这个(npm install -g cnpm --registry="https://registry.npm.taobao.org ") 3.安装webpack,打开命令行工具输入:npm install webpack -g 4.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g 搭建项目1.cd 到根目录下 2.vue init webpack (项目名英文)Us

Windows 系统搭建vue开发环境

1.首先 去node.js 官网下载对应node https://nodejs.org/en/download/ 2. 双击下载的安装包,一路默安装,傻瓜式操作,下一步,下一步 3. 安装完打开cmd,输入node -v ,如果安装成功 会显示对应的版本node版本号 4.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 5.查看自己有没有安装成功的 ,直接输入cnpm -v 6.接下来 我们就开始安装全局

基于Visual Studio Code搭建Vue开发环境

安装node.js最新版 这里安装的是8.11.4版 image.png 更新npm至最新版 安装node.js后, npm默认版本为: 6.1.0 image.png 使用npm install npm -g更新npm至最新版 image.png 安装vs code 安装过程就忽略了. 安装@vue/cli > npm install -g @vue/cli image.png 创建一个vue-demo-project工程 创建过程中默认配置(开箱即用) image.png image.png