搭建脚手架cli2.x环境
Vue脚手2.x架环境搭建
一.环境搭建
1.安装node
- 去官网下载node安装包
- 傻瓜式安装
- 万一安装后终端没有node环境,要进行node环境变量的配置
- 可以通过node提供的npm包管理器安装vue脚手架
- 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)
2.安装全局vue脚手架
- 起管理员终端(mac: sudo)
- npm install -g @vue/cli
- 如果安装失败,检测网络,清npm缓存(npm cache clean --force)后重新安装
3.创建项目
- 采用可视化方式创建(cmd输入
vue ui
) - 采用命令行方式创建(按自己需求选择)
1.打开终端
2.去向目标目录(将项目创建在该目录)(cd 目标目录)
3.指令创建项目(vue create 项目名)
4.选择自定义:Manually select features
5.用空格选取所需插件:Babel, Router, Vuex, Linter
6.采用Router的history...
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
7.选择会报错的
> ESLint with error prevention only
8.选择保存就会检测语法
>(*) Lint on save
9.配置文件都放在package.json下面
> In package.json
10.是否保存这个创建规范 选y则以后创建项目都按照这个规范,这里我们选n
? Save this as a preset for future projects? (y/N) N
11.会在目标目录下创建一个以该项目名命名的文件夹,该文件夹就是所创的项目
4.启动项目
1.cd到项目目录
2.启动服务器(npm run serve)
3.退出服务器|刷新服务器(ctrl+c)
4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)
5.项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
6.项目开发
- vue.config.js
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
- main.js
// 不用修改
// 采用之前的语法创建根实例
new Vue({
el: "#app",
router: router,
store: store,
render: function (h) {
return h(App)
}
})
- *.vue
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
export default {
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>
搭建脚手架cli2.x环境的更多相关文章
- 使用yeoman搭建脚手架并发布到npm
前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...
- Vue:Vue2.0搭建脚手架
随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...
- 搭建Vue2.0开发环境
1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global ...
- Vue搭建脚手架2
Vue2.0搭建Vue脚手架(vue-cli) 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助.ps:高手请绕道. ...
- Vue搭建脚手架1
Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- 从零开始搭建react基础开发环境(基于webpack5)
前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
随机推荐
- 程序员过关斩将-- 喷一喷坑爹的面向UI编程
摒弃面向UI编程 为何喷起此次话题,因为前不久和我们首席架构师沟通,谈起程序设计问题,一不小心把UI扯进来,更把那些按照UI来编程的后台工程师也扯了进来.今天特意百度了一下(其实程序员应该去googl ...
- 5W2H方法:七问分析法
5W2H分析方法也叫七问分析法,是二战中美国陆军兵器修理部首创.简单.方便.易于理解.使用,富有启发意义,被广泛应用于企业管理和技术活动,对于决策和执行性的措施也非常有帮助,有助于弥补考虑问题的疏漏. ...
- Docker深入浅出系列 | Swarm多节点实战
目录 前期准备 Swarm基本概念 什么是Docker Swarm 为什么要用Swarm Swarm的网络模型 Swarm的核心实现机制 服务发现机制 负载均衡机制Routing Mesh Docke ...
- C++ 重载关系操作符
#include <iostream> using namespace std; class AAA { public: AAA() //默认构造 { } AAA(int id, stri ...
- SpringBoot(二) SpringBoot核心配置文件application.yml/properties
我们都知道在Spring中有着application.xml文件对Spring进行相关配置,通过web.xml中的contextConfigLocation指定application.xml文件所在位 ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
- POJ1703 Find them Catch them 关于分集合操作的正确性证明 种类并查集
题目链接:http://poj.org/problem?id=1703 这道题和食物链那道题有异曲同工之处,都是要处理不同集合之间的关系,而并查集的功能是维护相同集合之间的关系.这道题中有两个不同的集 ...
- Java日期处理易踩的十个坑
前言 整理了Java日期处理的十个坑,希望对大家有帮助. 一.用Calendar设置时间的坑 反例: Calendar c = Calendar.getInstance(); c.set(Calend ...
- 【2019HDU多校】第九场1006/HDU6685-Rikka with Coin——位运算打表
题目链接 题目大意 使用10.20.50.100元面额的硬币能分别组成题目给出的面额,需要最少的硬币个数 分析 一开始队友想用一堆if-else解决问题,然后WA了无数发-- 我想到了一种比较简单的打 ...
- Vmware15.5安装与许可教程
最近Windows总是提醒我1803版本的服务即将过期,劝我升级到最新版.可我在自动安装的过程中却总是安装失败.于是官网下载了更新助手.检测到的问题是升级过程和 Vmware 软件冲突,于是卸载了 V ...