【Vue】Vue脚手架安装搭建

## Vue脚手架安装搭建

操作系统：Windows 11 专业工作站

记录时间：2022年2月18日

在安装之前，需要安装node.js（Node.js (nodejs.org)），否则无法使用npm

安装

npm i -g @vue/cli

升级

npm update -g @vue/cli

查看当前脚手架版本

vue -V

安装指定版本脚手架

npm i -g @vue/cli@版本号

在cmd中创建一个项目

vue create projectName

选择版本

上下方向键选择，回车键确认

选择自己配置项目时，如果还没选好配置就摁下了回车，可 Ctrl+D 退出创建

安装项目其他依赖项

方式1

npm i --save 需要安装的依赖名字

方式2

vue add 需要安装的依赖名字

使用vue-ui进行创建/管理项目

vue ui

点击“在此创建新项目”

如果选择手动，则自己配置项目

运行

切换到创建项目的文件

cd projectName

运行项目

方法1：npm

npm run serve

方式2：yarn

yarn serve

查看项目默认安装的依赖

npm ls --depth 0

关闭项目

在cmd中按下ctrl+c

打包项目

npm run build

文件目录解析

1. node_modules：node安装的依赖包（vue脚手架程序很大是因为配置了node依赖包，****真正项目的本体是打包过后的dist文件夹）

2. dist：打包后的文件夹

3. public：公共静态资源；任何放置在public的静态资源都会被简单的复制，而不经过webpack的处理。****一般用来存放不会改变的静态资源和webpack文件和不支持的第三方库

• favicon.ico：默认图标
• index.html：（vue脚手架有特定的文件格式，打包的时候会识别这些格式这个文件名不可改，如果改了，运行时会报错

如果要改，还需要修改相应的配置文件才行）

1. src：存放代码的文件及文件夹（在这个文件夹中进行开发、写代码）

• asscts：存储项目中的静态文件（图片/字体/css等等）
• components：存放项目中的自定义组件（小组件以及公共组件）
• views：存放大组件，页面级组件，路由级别的组件
• router：存放路由（VueRouter）相关文件
• store：存储Vuex（状态管理器）相关文件
• App.vue：项目的根组件（项目所展示的页面）
• main.js：项目的入口文件

1. .gitignore：git忽略文件（因为git上传会忽略空文件夹）
2. babel.config.js：babel相关配置文件（将es6语法转为浏览器能够识别的代码）
3. package.json：vue脚手架描述文件，相关信息以及运行、打包指令、插件信息都在这里
4. README.md：项目说明

安装脚手架额外插件：

在脚手架目录新建一个.js文件（与package.json文件同级）：

//配置信息
module.exprots = { //模块导出
	//需要安装的插件:
  devServer:{ //配置信息
    port: 8080, //端口号
    host: 'localhostl', //地址
    open: true //自动打开浏览器
  }
}

vue脚手架文件夹及文件详解：

main.js文件内容详解：

//es6引入文件
import Vue from 'vue' //引入vue
import App from './App.vue' //引入App.vue页面

/*
productionTip设置为 false ，可以阻止 vue 在启动时生成生产提示
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。
而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。
此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的
*/
Vue.config.productionTip = false

//这个vue实例加载方式是典型的es6写法
new Vue({
	router,//挂载路由
	store,//挂载Vuex状态管理
	render: h => h(App) //render渲染;加载app.vue页面;h代表hypersript（超脚本）
}).$mount('#app') //将这个vue实例手动挂载到#app

App.vue（单文件组件）页面详解：

//组件内容（页面展示内容）
<template>
	<div id='app'>
    ...
  </div>
</template>

//组件控制区
<script>
  import 组件名 from './components/小组件名.vue'//引入小组件

  //全局组件定义
  Vue.component(
    '组件名',
    组件名
   );

  export default{//暴露出当前根组件叫'APP',且上面的根节点是'app'
    name: 'App',
    data(){
      return{
        //存放组件数据
      }
    }
    components:{//定义局部组件，即子组件
      组件名:{
    		template:xxx
  		}
    }
  }
</script>

//style样式;注意：这里的样式以及views和components组件的样式都是全局样式
//如果不通过单独添加样式名设置样式，则会作用到所有相应的标签上
//可以通过添加scoped声明此样式只此文件用
<style scoped lang="sass">//lang="使用什么css预处理语言"
  ...
</style>

router文件夹下面的index.js文件详解：

//导入文件
import...

//路由内容
const routes = [
	...
]

//路由实例化
const router = new VueRoutter({
	routes
})

//导出
export default router

views文件夹：

存放大型页面级组件

//页面内容
<template>
	<定义的小组件名 msg="传给小组件的值"/>
</template>

//js代码
<script>
  //引入小组件
	import 小组件名 from '小组件路径'  

	//定义小组件
	export default{
    name: '组件名',
    comoponets:{
      小组件名
    }
  }
</script>

components文件夹：

存放页面内的各种小组件

//页面内容
<template>
	小组件内容（html代码）
</template>

//js代码
export default{
  name: '小组件名',//不要使用_进行命名，因为还需要在标签中使用
  props: { //组件数据
    msg:String //定义传过来的数据类型
  }						 //也可以不定义数据类型
}

//css代码
<style>
  ...
</style>

asscts文件夹：

存储项目中的所有静态文件（图片及字体文件等等）

参考文章

Vue-cli 学习 · 语雀 (yuque.com)