vue.cli安装

一、环境搭建

1.cli工具：vue.js的脚手架工具

2.版本：vue-cli：老版本，主要基于vue.js v2.×+webpack构建应用

@vue/cli：新版本，主要基于vue.js v3.×+vite构建应用

3.用户端：vue-cli+vant

4.安装vue-cli：$ npm i vue-cli -g

5.问题：1.安装完成后不能识别为一个命令

原因：没有将vue-cli添加到环境变量
1.找到全局安装包路径：vue.cmd所在目录
2.添加为环境变量
3.重启终端或重启电脑

2.安装完成后不能执行vue命令：powershell异常,cmd正常

原因：powershell执行策略
1.查看当前的执行策略：get-executionPolicy
  Restricted:不允许执行脚本
2.重新设置执行策略：set-executionPolicy 选择 'Y'
  RemoteSigned:允许执行脚本

二、项目初始化

1.创建一个大项目目录：tiktok

2.进入目录，执行命令：$ vue init webpack web

Vue build：通过方向键选择  --  选择构建版本
1.完整版：运行时(Runtime)+编译器(Complier)
2.编译器：编译模板

3.开启项目：

1.进入项目目录：$ cd web

2.执行命令：$ npm run dev

4.开启成功之后根据提示打开对应的URL

5.目录结构：

build:webpack配置目录--打包相关
config:项目配置目录
node_modules:包目录
src:源文件目录
	--assets:静态资源目录--base64压缩
	--components:组件目录
	--router:路由目录
	  --index.js:路由
	--App.vue:根组件
	--main.js:根组件实例化文件
static:静态资源目录--直接加载
.babelrc:babel配置文件
.postcssrc.js:转换css的配置文件 -- 加特定厂商前缀
index.html:主页
package.json
package-lock.json

6..vue文件：单文件组件，共包含三部分

<template></template>：组件模板
<script>
export default {
    //组件选项
}
</script>：JS代码
<style></style>：CSS代码
scoped:style添加这个属性即表示样式只能作用于当前组件