300字范文 > Vue前端开发环境搭建

Vue前端开发环境搭建

时间：2021-06-07 11:58:32

相关推荐

Vue前端开发环境搭建

1、安装脚手架

Vue CLI官方文档

1.1、下载node.js

下载地址

1.2、安装node.js

方式一：安装包 ==> 指定路径下一步即可

方式二：压缩包 ==> 但是需要手动配置node.js环境变量

1.3、安装完成之后检查下版本信息

1.4、配置淘宝 NPM 镜像

方式一：安装 cnpm

阿里云 npm 镜像站

方式二：手动配置镜像地址

npm config set registry https://registry.

1.5、设置 npm 的默认安装路径

npm config set cache "D:\nodereps\npm-cache"npm config set prefix "D:\nodereps\npm-global"

1.6、配置环境变量

1.7、查看node.js环境配置

npm config ls# C:\Users\fan 目录下有个".npmrc"文件，可查看手动配置的信息

2、卸载脚手架

npm uninstall -g vue-cli# 卸载(1.x 或 2.x)版本脚手架npm uninstall -g @vue/cli

3、安装相应版本的依赖包

npm install -g vue-cli# 安装2.x版本脚手架npm install -g @vue/cli

4、查看 vue 版本

vue --version

5、创建 vue 脚手架项目

5.1、方式一：命令行

vue init webpack 项目名

5.2、方式二：可视化管理工具

vue ui #cli3.0 新增功能

6、运行前端系统

方式一：命令行（推荐）

# 进入项目目录中运行cd 项目目录npm run dev #OR npm run serve

方式二：WebStorm中手动配置

7、访问测试初始界面

8、项目结构总览

├── build 项目打包webpack的配置内容；构建脚本目录│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├── dev-client.js开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新│ ├── dev-server.js运行本地开发服务器│ ├── utils.js 构建相关工具方法│ ├── webpack.base.conf.jswabpack基础配置│ ├── webpack.dev.conf.js wabpack开发环境配置│ └── webpack.prod.conf.jswabpack生产环境配置==================================================├── config 项目配置文件│ ├── dev.env.js 开发环境配置信息│ ├── index.js 基本配置信息│ ├── prod.env.js 生产环境配置信息│ └── test.env.js 测试环境配置信息==================================================├── node_modules 项目依赖第三方node包（不用管）=========================src目录为开发核心=========================├── src项目源码目录│ ├── assets 资源目录（图片...），这里的资源会被wabpack构建│ │ └── images│ │ └── logo.png│ ├── components 公共组件目录│ │ └── title.vue│ ├── routes 前端路由│ │ └── index.js│ ├── store 应用级数据（state）状态管理│ │ └── index.js│ └── views 页面目录│ ├── hello.vue│ └── notfound.vue│ ├── App.vue 最原始的根组件│ ├── main.js 主入口js文件=========================src目录为开发核心=========================├── static 纯静态资源，不会被wabpack构建。│ └── mock mock数据目录│ │ └── hello.js└── test 测试文件目录（unit&e2e）└── unit 单元测试├── index.js 入口脚本├── karma.conf.jskarma配置文件└── specs 单测case目录└── Hello.spec.js├── .babelrc babel配置。"balel可以将vue的单文件组件的写法转换成浏览器能够编译执行的代码"├── .editorconfig 编辑器语法配置文件├── .gitignore git忽略文件├── .postcssrc.js 对postcssrc的配置项├── index.html 默认首页模板文件，入口页面├── LICENSE 开源协议说明├── package-lock.jsonnpm包锁文件，确定依赖包的版本├── package.jsonnpm包配置文件，里面定义了项目的npm脚本，依赖包等信息├── README.md项目介绍

8.1 详细介绍

将vue初始化自带的无用文件删除后的src目录结构（pages目录及其以下文件是自己所创建的）

main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router' //自动引入router文件夹下的index.js文件Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',// router: router, //ES6 语法，键值相同，可以省略router, //路由就是根据网址不同，返回不同的内容给用户// components: { App: App }, //ES6 语法，键值相同，可以省略components: {App }, template: '<App/>'})

App.vue

<template><div id="app"><router-view/></div></template><script>export default {name: 'App'}</script><style></style>

router/index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'import List from '@/pages/list/List'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home}, {path: '/list',name: 'List',component: List}]})