u2 尚硅谷--Vue 脚手架

第 3 章:使用 Vue 脚手架 3.1 初始化脚手架

3.1.1 说明

  1. Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
  2. 最新的版本是 4.x。
  3. 文档: https://cli.vuejs.org/zh/。

3.1.2 具体步骤

第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目 vue create xxxx //xxxx为自己项目名
u2 尚硅谷--Vue 脚手架_第1张图片
开下载构建脚手架需要的文件
u2 尚硅谷--Vue 脚手架_第2张图片

第三步:启动项目 npm run serve
/Users/yangshengwei/学习/前端/vue/尚硅谷/代码/vue2_me_test

复制地址浏览打开
u2 尚硅谷--Vue 脚手架_第3张图片
同局域网手机打开
u2 尚硅谷--Vue 脚手架_第4张图片
第四步退出
control +c
u2 尚硅谷--Vue 脚手架_第5张图片
vscode 中打开项目运行

vscode 中修改代码,使用control+s 保存 项目会自动编辑更新执行
u2 尚硅谷--Vue 脚手架_第6张图片

vue的项目结构

main.js

npm run serve运行后首先进入 main.js
u2 尚硅谷--Vue 脚手架_第7张图片
u2 尚硅谷--Vue 脚手架_第8张图片

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

/* 
	关于不同版本的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函数去指定具体内容。
*/

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

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

App.vue

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School>School>
		<Student>Student>
	div>
template>

<script>
	//引入组件
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
script>

u2 尚硅谷--Vue 脚手架_第9张图片

index.html

DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
		
    <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>
		
    <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>
    
  body>
html>

设置页面图表和标题

u2 尚硅谷--Vue 脚手架_第10张图片

u2 尚硅谷--Vue 脚手架_第11张图片

引入的vue

u2 尚硅谷--Vue 脚手架_第12张图片
u2 尚硅谷--Vue 脚手架_第13张图片
u2 尚硅谷--Vue 脚手架_第14张图片

你可能感兴趣的:(#,vue,vue.js,前端,javascript)