搭建脚手架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, ...
随机推荐
- 【转】JS内置对象方法
String内置对象的方法 1. concat() concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串 var str = "Hello"; var out ...
- 【tomcat系列】配置tomcat远程访问
当程序部署在tomcat上后,需要监测tomcat的性能和监测tomcat的各项指标,如内存使用情况,cpu使用情况,jvm实际情况等,对于这些指标的监控,tomcat提供了访问入口,然而tomcat ...
- 项目测试中发现产品bug怎么办
我所在的产品线,并非公司最大最强的产品 甚至为了推广我们这个产品,一般会拿给客户先免费试用 而在试用之前,是要经过一番通测的,测得很急,测得很快 所以产品bug非常多 那么在测试项目的时候,自然会发现 ...
- TCP/IP协议基本知识
1.TCP/IP协议中主机与主机之间通信的三要素: IP地址(IP address) 子网掩码(subnet mask) IP路由(IP router) 2.IP地址的分类及每一类的范围: A类1-1 ...
- 利用border-radius画椭圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue--基础应用 全选
1.用computed实现全选 <body> <div id="app"> <input type="checkbox" v-mo ...
- strongsan基本用法
0x01 安装 ====> CentOS RPM安装 下载:https://pkgs.org/download/strongswanwget http://download-ib01.fedor ...
- Kafka的面试题
1.Kafka的设计是什么样的呢?Kafka将消息以topic为单位进行归纳将向Kafka topic发布消息的程序成为producers.将预订topics并消费消息的程序成为consumer.Ka ...
- Java中static和final的解析
static关键字和final关键字是Java中一个难点&重点.本文通过static的用途.常见问题.final的用途.final常见问题,以及static和final的对比来解释这两个关键字 ...
- Docker Data
docker data 六.Docker存储 docker存储驱动storage driver(优先使用linux默认的storage driver,因为比较稳定) ubuntu:aufs,/var/ ...