一、创建项目

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

二、启动项目

项目创建之后，会在当前目录下多出一个项目文件夹。从它的 package.json 中可以看到只有 vue.js 的核心依赖

然后启动项目试试，在项目根目录运行终端，在命令行输入

npm run serve

# OR

yarn serve

　　

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

　　

{

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build"

  }

}

　　

在浏览器中打开链接 http://localhost:8080/，就能看到项目的启动页

pycharm中运快捷启动项目：

三、配置文件

项目默认使用的端口是 8080，如果想使用别的端口，可以在项目的根目录创建一个 vue.config.js

// vue.config.js

module.exports = {

  outputDir: 'dist', // 打包的目录

  lintOnSave: true, // 在保存时校验格式

  productionSourceMap: false, // 生产环境是否生成 SourceMap

  devServer: {

    open: true, // 启动服务后是否打开浏览器

    overlay: { // 错误信息展示到页面

      warnings: true,

      errors: true

    },

    host: '0.0.0.0',

    port: 8082, // 服务端口

    https: false,

    hotOnly: false,

    // proxy: { // 设置代理

    //   '/api': {

    //     target: host,

    //     changeOrigin: true,

    //     pathRewrite: {

    //       '/api': '/',

    //     }

    //   },

    // },

   },

}

　　

四、目录结构

1、node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖：

<1> 项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）

<2> 安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）

注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4

2、index.html——[主页]

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。这是整个应用的 html 基础模板，也是打包编译后的项目入口。

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

　　

3、src——[项目核心文件]

项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js，App.vue,及router的index.js

4、main.js——[入口文件]

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，后期还可以引入插件，当然首先得安装插件。

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

　　

main.js 只是引入了 App.vue 组件，并挂载到上面提到的 #app 节点下。这里的 createApp方法是 Vue 3 新增的全局 API，用来创建一个 Vue 应用，并挂载到某个 DOM 节点。

5、App.vue——[根组件]

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

<template>

  <div id="nav">

    <router-link to="/">Home</router-link> |

    <router-link to="/about">About</router-link>

  </div>

  <router-view/>

</template>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

#nav {

  padding: 30px;

}

#nav a {

  font-weight: bold;

  color: #2c3e50;

}

#nav a.router-link-exact-active {

  color: #42b983;

}

</style>

　　

【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）

是子路由视图，后面的路由页面都显示在此处

打一个比喻吧,类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示

【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档，在后面我也会通过例子来说明。

【style】

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

　　

6、router——路由

router文件夹下，有一个index.js，即为路由配置文件

　　

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../views/Home.vue'

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home

  },

  {

    path: '/about',

    name: 'About',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

　　

这里定义了路径为'/‘的路由，该路由对应的页面是Home组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Home组件

类似的，我们可以设置多个路由，‘/index’,'/list’之类的，当然首先得引入该组件，再为该组件设置路由。

Vue cli构建项目的更多相关文章

  1. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. vue框架构建项目流程

    构建项目流程: 1.全局查询:node -v 2.全局初始化:npm install --global vue-cli 3.模块化工程:vue init webpack myapp--->y,n ...

  4. Vue -cli 入门 --项目搭建(一)

    一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  7. 基于electron+vue+element构建项目模板之【创建项目篇】

    1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件 ...

  8. 使用Vue CLI构建Vue项目

    第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  10. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

随机推荐

  1. jenkins安装卸载和下载

    环境 :docker容器 卸载 jenkins 1.rpm卸载rpm -e jenkins 2.检查是否卸载成功rpm -ql jenkins 3.彻底删除残留文件:find / -iname jen ...

  2. openGauss/MogDB调用C FUNCTION

    openGauss/MogDB 调用 C FUNCTION 摘要 之前写过一篇关于postgresql 自定义函数实现,通过 contrib 模块进行扩展的帖子,今天和恩墨工程师进行了一些交流,在 M ...

  3. Lite Actor：方舟Actor并发模型的轻量级优化

    原文:https://mp.weixin.qq.com/s/8biIBddpy6GKgakazg1vcg,点击链接查看更多技术内容. 并发模型是用来实现不同应用场景中并发任务的编程模型,通过合理地使用 ...

  4. c# seo 百度sitemap书写

    前言 我们知道对页面百度收录,有两种方式: 1.百度自己抓取. 2.自己提交sitemap让百度来抓取. sitemap 一般的一个业务逻辑是: 生成sitemap xml,然后每隔一段时间更新即可, ...

  5. vue 商品sku，笛卡尔算法，商品添加。动态生成table，table添加值后 再生成的table 不改变table之前输入的值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 力扣436(java&python)-寻找右区间（中等）

    题目: 给你一个区间数组 intervals ,其中 intervals[i] = [starti, endi] ,且每个 starti 都 不同 . 区间 i 的 右侧区间 可以记作区间 j ,并满 ...

  7. ATC'22顶会论文RunD：高密高并发的轻量级 Serverless 安全容器运行时 | 龙蜥技术

    简介: RunD可以在88毫秒内启动,并且在104核384GB内存的单节点上每秒启动超过200个安全容器. 编者按:目前的安全容器软件栈 - 包括 host 操作系统中的 cgroup.guest 操 ...

  8. Apache Flink 在实时金融数据湖的应用

    简介: 本文由京东搜索算法架构团队分享,主要介绍 Apache Flink 在京东商品搜索排序在线学习中的应用实践 一.背景 在京东的商品搜索排序中,经常会遇到搜索结果多样性不足导致系统非最优解的问题 ...

  9. 面向B端算法实时业务支撑的工程实践

    简介:在营销场景下,算法同学会对广告主提供个性化的营销工具,帮助广告主更好的精细化营销,在可控成本内实现更好的ROI提升.我们在这一段时间支持了多个实时业务场景,比如出价策略的实时化预估.关键词批量服 ...

  10. 深入分析 Flutter 渲染性能

    简介: Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等.虽然它在渲染性能 ...