博客

一、环境搭建

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添加这个属性即表示样式只能作用于当前组件