【Vue】基于脚手架创建Vue项目+Vue组件基本使用

最新推荐文章于 2023-05-10 20:36:20 发布

不大好不大好

最新推荐文章于 2023-05-10 20:36:20 发布

阅读量428

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44707049/article/details/117253267

版权

第一步：安装Node.jsnode.js 安装详细步骤教程第二步：全局安装vue-clinpm install @vue/cli -g第三步：创建一个基于 webpack 模板的新项目（一）下载webpack离线模板下载地址：https://github.com/vuejs-templates/webpack下载好之后，将其解压到本地用户目录下的.vue-templates目录下(二) 创建项目进入你的项目目录，创建一个基于 webpack 模板的新项目。比如说你想在E盘的Web

摘要由CSDN通过智能技术生成

第一步：安装Node.js

node.js 安装详细步骤教程

第二步：全局安装vue-cli

npm install @vue/cli -g

第三步：创建一个基于 webpack 模板的新项目

（一）下载webpack离线模板

下载地址：
https://github.com/vuejs-templates/webpack

下载好之后，将其解压到本地用户目录下的.vue-templates目录下
在这里插入图片描述

(二) 创建项目

进入你的项目目录，创建一个基于 webpack 模板的新项目。比如说你想在E盘的Web文件夹下创建一个名为vue_demo的项目。则可以根据下面的流程来：

1.键盘 win+R 输入 cmd 回车
2.输入命令 e: 回车进入到E盘
3.输入命令 CD web 回车进入到web文件夹下
4.输入命令 vue init webpack vue_demo --offline 回车
在这里插入图片描述
按下回车后后进入一些项目的配置，刚开始使用Vue的话，大多数配置用默认的就行了，但是对新手来说Use ESLint to lint your code?这个配置最好先选择No，因为如果选择Yes，它会用一种比较严格的模式来要求的你的代码编写的规范（即会有很多报错，比如某行代码前面只能有两个空格呀之类的都会报错）
在这里插入图片描述
创建好了之后，我们按照它的说明输入这两条命令
1.输入 cd vue_demo 回车进入项目的目录
2.输入 npm run dev 回车运行项目

项目开始编译，编译完了就会出现下面这个命令窗口

我们把它给我们的url复制到浏览器中
在这里插入图片描述

第四步：目录结构分析

到这里项目就创建好了，然后把项目文件夹拉进编译器里，VS或者WebStrom或者HbuildX都可以，我拉进HX里面，看个人喜好。
在这里插入图片描述
打开项目文件夹，看里面的文件目录结构如下

vue_demo :  项目文件夹，里面存放整个项目的代码
  |-- build : webpack 相关的配置文件夹(基本不需要修改)
          |-- dev-server.js : 通过 express 启动后台服务器
  |-- config: webpack 相关的配置文件夹(基本不需要修改)
          |-- index.js: 指定的后台服务的端口号和静态资源文件夹
  |-- node_modules : 依赖文件夹
  |-- src : 源码文件夹
          |-- assets: 静态资源，如css,js,图片
          |-- components: vue 组件及其相关资源文件夹
          |-- router: 路由文件
          |-- App.vue: 应用根主组件
          |-- main.js: 应用入口 js
  |-- static: 静态资源文件夹，一些公用的东西
  |-- .babelrc: babel 的配置文件
  |-- .eslintignore: eslint 检查忽略的配置
  |-- .eslintrc.js: eslint 检查的配置
  |-- .gitignore: git 版本管制忽略的配置
  |-- index.html: 主页面文件
  |-- package.json: 应用包配置文件
  |-- README.md: 应用描述说明的 readme 文件

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'	//引入Vue，注意左边的Vue首字母大写，右边的vue全部小写，不能错
import App from './App'	//引入组件App
import router from './router' //引入路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',	//挂载根节点，对应index.html中id="app"的div
  router,
  components: {
    App },//引入组件
  template: '<App/>'//映射组件为标签
})

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
    
  name: 'App'
}
</script>

<style>
#app {
    
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

一个vue页面通常由模板(template)、js(script)、样式(style)三部分组成。

template

其中模板只能包含一个父节点，<router-view/>为<router-view></router-view>的简写，是子路由视图，后面的路由页面都显示在此处。

script

vue通常用es6语法来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

style

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

实例

按照下图的操作，先运行一次项目
在这里插入图片描述

最低0.47元/天解锁文章

不大好不大好

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Vue】基于脚手架创建Vue项目+Vue组件基本使用

第一步：安装Node.jsnode.js 安装详细步骤教程第二步：全局安装vue-clinpm install @vue/cli -g第三步：创建一个基于 webpack 模板的新项目（一）下载webpack离线模板下载地址：https://github.com/vuejs-templates/webpack下载好之后，将其解压到本地用户目录下的.vue-templates目录下(二) 创建项目进入你的项目目录，创建一个基于 webpack 模板的新项目。比如说你想在E盘的Web
复制链接

扫一扫

专栏目录