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环境的更多相关文章

  1. 使用yeoman搭建脚手架并发布到npm

    前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...

  2. Vue:Vue2.0搭建脚手架

    随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...

  3. 搭建Vue2.0开发环境

    1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global ...

  4. Vue搭建脚手架2

    Vue2.0搭建Vue脚手架(vue-cli) 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助.ps:高手请绕道. ...

  5. Vue搭建脚手架1

    Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...

  6. 前端开发 Vue -1windows环境搭建Vue Node开发环境

    解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...

  7. 从零开始搭建react基础开发环境(基于webpack5)

    前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...

  8. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  9. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

随机推荐

  1. 【转】JS内置对象方法

    String内置对象的方法 1. concat() concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串 var str = "Hello"; var out ...

  2. 【tomcat系列】配置tomcat远程访问

    当程序部署在tomcat上后,需要监测tomcat的性能和监测tomcat的各项指标,如内存使用情况,cpu使用情况,jvm实际情况等,对于这些指标的监控,tomcat提供了访问入口,然而tomcat ...

  3. 项目测试中发现产品bug怎么办

    我所在的产品线,并非公司最大最强的产品 甚至为了推广我们这个产品,一般会拿给客户先免费试用 而在试用之前,是要经过一番通测的,测得很急,测得很快 所以产品bug非常多 那么在测试项目的时候,自然会发现 ...

  4. TCP/IP协议基本知识

    1.TCP/IP协议中主机与主机之间通信的三要素: IP地址(IP address) 子网掩码(subnet mask) IP路由(IP router) 2.IP地址的分类及每一类的范围: A类1-1 ...

  5. 利用border-radius画椭圆

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. vue--基础应用 全选

    1.用computed实现全选 <body> <div id="app"> <input type="checkbox" v-mo ...

  7. strongsan基本用法

    0x01 安装 ====> CentOS RPM安装 下载:https://pkgs.org/download/strongswanwget http://download-ib01.fedor ...

  8. Kafka的面试题

    1.Kafka的设计是什么样的呢?Kafka将消息以topic为单位进行归纳将向Kafka topic发布消息的程序成为producers.将预订topics并消费消息的程序成为consumer.Ka ...

  9. Java中static和final的解析

    static关键字和final关键字是Java中一个难点&重点.本文通过static的用途.常见问题.final的用途.final常见问题,以及static和final的对比来解释这两个关键字 ...

  10. Docker Data

    docker data 六.Docker存储 docker存储驱动storage driver(优先使用linux默认的storage driver,因为比较稳定) ubuntu:aufs,/var/ ...