Vue-CLI 项目搭建、
一、Vue-CLI 项目搭建、vue项目编写规范
1.1、单文件组件
# 单页面应用:spa
-以后vue项目就只有一个 xx.html 页面
-定义很多组件,不可能都写在 xx.html中把
# 单文件组件(一个组件一个文件)
https://v2.cn.vuejs.org/v2/guide/single-file-components.html#ad
# 一个组件中有的东西
1 html内容:以后html都放在 template标签中
2 css内容 :以后都放在 style 标签中
3 js内容: 以后都放在 script标签中
1.2、使用vue-cli 创建vue项目,才能使用 单文件组件
vue-cli是什么: 就是vue的脚手架
1.3、环境搭建
# vue-cli脚手架,
# vue2中使用创建vue项目的软件必须用vue-cli
# vue3中可以使用vue-cli,也可也使用vite创建,vite号称新一代的构建工具
1.3.1、使用vue-cli 创建vue项目,才能使用 单文件组件
-vue脚手架:创建出vue的项目,里面带了很多基础代码
-类似于django-admim命令,可以创建出django项目
1.3.2、 vue-cli是个软件,运行在nodejs环境中,安装nodejs
使用vue-cli创建vue项目 步骤:
- 1、 vue-cli是个软件,运行在nodejs环境中,安装nodejs
'''
-下载地址:https://nodejs.p2hp.com/download/
-类似于python解释器,一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)
-查看node版本
node -v
-安装完,释放两个可执行文件
node 等同于 python
npm 等同于 pip
'''
- 2、运行node环境
'''
运行cmd窗口输入node
'''
- 3、npm 安装第三方模块,速度很慢,淘宝做了个cnpm,以后咱们可以使用cnpm替代npm,会去淘宝镜像站下载,速度快
# 下载命令,任意位置都可以下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后 使用npm安装模块的命令全都换成 cnpm
- 4、安装vue的脚手架(vue-cli 就是vue的脚手架), 在node环境中装vue-cli (类似于装django)
# 密令
cnpm install -g @vue/cli # 推荐使用cnpm,速度快
npm install -g @vue/cli
-
4 装完脚手架,会多出一个命令 vue 用来创建vue项目 等同于djagno-admin命令
-
5 使用脚手架,创建vue项目
1.4、 vue-cli创建项目
1.4.1、 vue-cli 命令行创建项目
# 创建vue项目需要注意创建的路径,一般在d盘的更目录下
# 1 vue create 项目名
vue create myfirstvue