2021-07-07 vue笔记-脚手架vue-cli(一) Vue CLI安装与项目搭建和App.vue的三个标签

原创已于 2022-10-16 19:30:07 修改 · 280 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #组件 #vue CLI #js

于 2021-07-07 08:28:46 首次发布

vue学习笔记专栏收录该内容

37 篇文章

订阅专栏

文章目录

0.下载插件CnPlugin

这是一个检测当前网站是不是用vue开发的插件,配上360极速浏览器

1.介绍

vue CLI是一个基于vuejs进行快速开发的完整系统,可以实现项目脚手架,可以实现零配置原型开发.
vue CLI致力于将Vue生态中的工具基础标准化,确保各种构建工具,能够基于智能的默认配置,可稳衔接
这样,用户可以专注于撰写应用上,不用纠结配置问题

2.安装命令

2.1.安装

npm install -g @vue/cli
或者
yarn global add @vue/cli

2.2.版本检查

vue --version

成功安装:

PS E:\VSCode\vue> vue --version
@vue/cli 4.5.13

2.3.快速原型开发

npm install -g @vue/cli-service-global

3.创建一个项目

步骤1:新建项目

vue create hello-world

新建一个名为hello-world的项目文件夹

步骤2:进入项目文件

cd hello-world

步骤3:开启服务器

yarn serve

*结果如下:

 WAIT  Compiling...                                                                                                   下午2:51:52
98% after emitting CopyPlugin

 DONE  Compiled successfully in 446ms                                                                                 下午2:51:53
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.11.60.78:8080/

步骤4:修改App.vue

改成自己需要的样式

步骤5:浏览器输入http://localhost:8080/

查看App.vue的样式
在这里插入图片描述

4.vue项目目录结构解释

----目录----
1.node_modeles	项目的依赖中心
2.public	静态资源文件夹，和assets不同的是，public不会被webpack进行打包，使用路径的时候要使用绝对路径
3.src	项目核心区域，所有的开发文件的核心内容区域，包括组件，静态资源
4.assets	静态资源文件夹，要使用相对路径
5.components	vue功能组件的存放位置，内部存放的使公用的组件
6.views	公用文件，主要以各个独立页面为主
----文件----
1.App.vue 	整个vue的根组件，所有的vue组件都是从这个组件中拓展的，app根组件最后通过编译后将内容渲染到.html文件中
2.main.js	vue的入口文件，vue文件初始化位置
3.babel.config.js	babel的配置文件
5.package.json  	配置（记录）了项目的相关模块，项目相关配置信息等等
6.package-lock.json		记录当前项目的安装的相关依赖版本，并且记录了当前所有依赖的关联关系，
如果下次vue进行编译的时候，会按照这个文件进行编译

4.模板项目目录结构(再发一次)

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

5.单文件组件App.vue的三个标签

<!-- 完整语法高亮:DOM样式 -->
  <template>
    <p>{{str}} World!</p>
  </template>
  <!-- CommonJs模块:js样式 -->
  <script>
    module.exports = {
      data:function(){return {str: "Hello"}}
    }
  </script>
  <!-- 组件化的css标签:css样式 -->
  <style>
      p{color:red;}
  </style>