vue2:使用vue_cli创建
vue3：可以使用vue_cli创建，官方更推荐使用vite：更快更小
脚手架：内置了很多组件来帮助我们更便捷的的开发vue.js项目。
1.使用vue_cli创建项目
vue_cli是基于node.js编程语言创建的
1.1 安装
- 安装node.js
下载链接: https://nodejs.org/en/download/
根据自己的操作系统选择安装，安装非常简单，一直下一步就行,检查安装是否成功
node -v
- 关于npm
npm就类似python中的pip工具，是node.js的包管理工具，更新npm
sudo npm install npm@latest -g
设置npm的下载源
npm config set registry https://registry.npm.taobao.org
- 下载vue-cl包
# 安装（最新版） sudo npm install -g @vue/cli # 安装（指定版本） sudo npm install -g @vue/cli@4.5.14 # 卸载 sudo npm uninstall -g @vue/cli
1.2 创建项目
- 切换到想要创建目录位置
- 指定项目名称
vue create myfirstvue
- 选择创建vue的版本等信息，这里我选择自定义
- 选择需要的第三方组件
- 选择vue版本，我这里选择2.0
-
选择Y
-
选择包管理工具
-
选择N
创建成功
1.3 项目启动
方式一:
# 1. 进入创建的项目目录
# 2. 执行如下命令
npm run serve
打开链接，看到如下页面，代表项目运行成功
方式二：
- 将创建的项目使用pycharm或者webstorm打开
- 添加配置
- 点击绿箭头运行项目
1.4 项目目录介绍
项目依赖包相当于django项目中的虚拟环境，我们在实际开发中，如果传递项目，一般会将这个删除，如果想要重新下载
npm install
2.使用vite创建项目
2.1.创建项目
切换路径后，执行如下命令创建test项目
npm init vite-app test
2.2 安装依赖
相对于vue_cli安装，缺少模块以来
npm install
并且安装的项目是非常纯净的，不会有vue-router.vuex等插件，需要手动安装
npm install vue-router@4
npm install vuex@next --save
并且在项目目录中也不会自动帮助我们生成store等目录，搜都需要我们手动创建
目录结构如下：
2.3 启动项目
方式一：
npm run dev
方式二
使用webstorm或者pycharm，方式如上
3.webstorm创建项目
1. 创建vue项目，编辑项目名称
2. 项目创建成功后的目录结构如下
3. 安装第三方插件
npm install vue-router@4
npm install vuex@next --save
该方式也不会主动帮助我们创建store等文件夹没需要我们手动创建，但是可以使用如下方式就可以自动生成对应的文件夹
vue add router
4. vue项目开发特点
4.1 小组件的开发
以后开发组件，也就是一个.vue文件，由三部分组成
1 // 模板区域
<template> 2 <div class="hello"> 3 31 </div> 32 </template> 33 // JS代码区域 34 <script> 35 export default { 36 name: 'HelloWorld', 37 props: { 38 msg: String 39 } 40 } 41 </script> 42 // CSS样式区域 43 <!-- Add "scoped" attribute to limit CSS to this component only --> 44 <style scoped> 45 59 </style>
4.2 小组件的引入和使用
在另一个组件中引入上述的HelloWorld组件方法
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
// 组件的使用
<HelloWorld></HelloWorld>
</div>
</template>
<script>
// 组件的导入 import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'HomeView',
// 局部组件的定义 components: { HelloWorld } } </script>
