vue-vue2脚手架1-初识脚手架

最新推荐文章于 2024-03-21 19:15:50 发布
最新推荐文章于 2024-03-21 19:15:50 发布
阅读量247 收藏
点赞数 1
分类专栏： # vue2脚手架 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhougubei/article/details/121146918
版权

vue-vue2核心10-脚手架

初识脚手架

安装vue

官网文档地址：vue cli     cammand line interface

文档:

安装vue脚手架之前需要安装node.js
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

node.js官网连接

博主在这里安装的时候比较尴尬，因使用的是win7系统不支持node 12.以上的版本，会报错： window server 2012 R2,or higher

在这里插入图片描述

这里我提供一个12版本的,不要积分！！！抵制资本家
node12版本下载

关于node.js一直下一步安装就行，安装完成之后可以调用命令来测试一下

在这里插入图片描述

安装npm之后，切换npm地址源

下载缓慢请配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org

配置完之后在配置一遍也没问题

安装vue cli

    npm install -g @vue/cli

安装完成之后，先切换文件目录地址，避免在当前路径下创建文件vue.我选的D：/vuetest。一定要切换工作目录奥。xdm

创建vue脚手架

   vue create xxxx

在这里插入图片描述

这里vue会问你选择哪个版本是vue2,还是vue3
label 指的是 es6==> es5
eslint 指的是语法检查
如果卡着不动，敲下回车试一下，出successfully证明创建成功

在这里插入图片描述

切换到刚才创建vue目录，启动vue项目

  npm run serve

在这里插入图片描述

输入地址，展示vue

在这里插入图片描述

项目目录结构说明

 ├── node_modules 
 ├── public
 │ ├── favicon.ico: 页签图标 
 │ └── index.html: 主页面 
 ├── src 
 │ ├── assets: 存放静态资源 
 │ │ └── logo.png 
 │ │── component: 存放组件 
 │ │ └── HelloWorld.vue 
 │ │── App.vue: 汇总所有组件 
 │ │── main.js: 入口文件 
 ├── .gitignore: git 版本管制忽略的配置 
 ├── babel.config.js: babel 的配置文件 
 ├── package.json: 应用包配置文件 
 ├── README.md: 应用描述文件 
 ├── package-lock.json：包版本控制文件

打开项目main.js

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false


//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

关于不同版本的Vue：

	1.vue.js与vue.runtime.xxx.js的区别：
			(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
			(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

	2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
		render函数接收到的createElement函数去指定具体内容。

打开public下面index html页面

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
		<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<!-- 引入第三方样式 -->
		<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
		<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
		<!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
		<!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

打开vue隐藏文件

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置

     vue inspect > output.js

在这里插入图片描述

因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

这里会提示windos10 禁止应用脚本，可以打开该脚本
解决办法：设置系统允许脚本运行
win + x 以管理员身份运行PowerShell
输入set-executionpolicy remotesigned，设置成Y即可
转载：https://blog.csdn.net/weixin_47409897/article/details/110195531

这个里面有关于脚手架生成的内容
如果想要更改配置，可以参考官网 cli里面的配置可以修改。
可以生成文件 vue.config.js 去更改默认配置

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}
飘然渡沧海
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli4搭建脚手架.doc
01-20
vue版本脚手架的安装
Vue-cli(vue脚手架)上万字总结，超详细教程
热门推荐
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
VUE2 脚手架搭建
胡图图的博客
11-01 3622
脚手架环境安装，脚手架基础结构，Vue的常用指令(v-for)
Vue2（七）：脚手架、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式
最新发布
Hdhhdhbsjxbdhvyg的博客
03-21 1072
新建文件mixin.js定义两个混合mixin和mixin2methods:{// 分别暴露交出去，别人才能用data(){return{x:100,y:200plugin.js//1.定义一个全局过滤器//返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点},el.focus();},})//3.定义一个全局混合,不用引入就能给所有的vm和vcdata() {return {x: 1,y: 2})
Vue2：Vue2 @vue/cli脚手架
孤安先生的博客，作者主站正在重构中，敬请期待！
11-08 2589
Vue 是一个 JavaScript 渐进式框架。一个可接近的，性能和通用的框架，用于构建web用户界面。
vue脚手架搭建项目（详细教程）
weixin_65855560的博客
06-19 1万+
vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有。Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具）命令行界面。npm list：查看当前目录下已安装的node包。npm ls：查看当前目录下已安装的node包。npm -v：查看npm安装的版本。：是一个开源的前端打包工具。1.进入终端执行命令。
Vue2.0搭建脚手架（vue-cli）
Phils的博客
10-10 1万+
Vue2.0搭建脚手架（vue-cli）
使用vue-cli（vue脚手架）快速搭建项目的方法
12-10
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个...
从0搭建vue-cli4脚手架
11-20
之前写了两期前后端分离的SpringBoot项目，从0搭建到整合Mybatis，但是只有后端没有前端的项目是不完整的，所以今天更新一篇从0搭建vue-cli4脚手架。 准备工作，有点类似java的jdk 安装node.js 直接去官网下载就可以...
Vue-cli脚手架搭建
01-08
Vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板 一、官方文档 Vue-cli 二、事先安装 得安装node.js和npm 查看版本node -v npm -v 更新至最新版本 npm install -g node npm install -g npm 三、...
vue-cli3.0 脚手架搭建项目的过程详解
12-10
1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本：vue -V(大写的V) 2.命令变化 vue create --help 用法：create [options] 创建一个由 `vue-cli-service` 提供...
vue脚手架搭建、介绍和初始页面的构造（图文详细）
m0_56369204的博客
06-28 3281
如何解决繁琐的项目初始化过程，快速搭建一个Vue项目，而不必担心复杂的配置和设置？Vue脚手架Vue Scaffold（Vue CLI）将实现这个功能，本文将带你入门Vue脚手架，熟悉项目结构和基本配置。
Vue（三）使用Vue脚手架
weixin_58598560的博客
05-30 3557
/ 全局过滤器})// 定义全局指令// 指令与元素成功绑定时（一上来）},// 指令所在元素被插入页面时},// 指令所在的模板被重新解析时})//定义混入data() {return {x: 100,y: 200},})//给Vue原型上添加一个方法（vm和vc都能用）alert('你好啊！')1、拆分静态组件组件要按照功能点拆分，命名不要与html元素冲突2、实现动态组件考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：（1）
Vue开发项目入门——Vue脚手架
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
vue3.0 vue-cli3.0 搭建项目
爱睡的虫虫
11-15 2113
vue 搭建项目 生产环境的构建配置（脚手架） //全局安装 vue-cli cnpm install -g vue-cli //创建一个基于webpack 模板的新项目 vue init webpack my-name ? Project name webpc //项目名（回车键默认） ? Project description //项目描述 ? Aut...
vue-cli脚手架
lanlan112233的博客
04-13 1963
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程删除已安装的 vue-cli先安装淘宝镜安装cli安装结束后，你可以通过或vue -V查看 vue-cli 的版本信息。
Vue2基础教程(脚手架版)
qq_57319760的博客
09-14 1847
本文讲解使用Vue脚手架进行Vue2学习，适合学习完一遍vue2基础的人进行复习
学习笔记|Vue入门笔记—脚手架vue-cli的详细安装和使用
Jum的博客
03-18 2359
Vue-cli是vue的一个脚手架工具，主要作用：目录结构、本地调试、代码部署、热加载、单元测试。
Vue 脚手架
Errol's Blog
03-30 8489
Vue 脚手架
vue-admin-template脚手架包
08-04
你好！关于"vue-admin-template"脚手架包，它是一个基于Vue.js和Element UI的后台管理系统脚手架，提供了一套完整的开发模板和常用的功能组件，可以快速搭建一个现代化的后台管理系统。 它具有以下特点： - 基于最新的Vue.js和Element UI版本，使用了Vue CLI进行项目构建。 - 提供了一套完整的权限管理系统，可以灵活地控制页面级别和操作级别的权限。 - 内置了多种主题样式可供选择，支持动态切换主题。 - 集成了常用的功能组件，如表格、表单、图表等，可以快速开发各种后台功能。 - 提供了丰富的示例页面和代码片段，方便开发者参考和使用。 你可以在GitHub上找到这个脚手架包，并根据README中的指引进行安装和使用。希望对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值