第一篇 vue - 基础 - vue 项目的构建方式

安装 node.js

node.js 是一个 Javascript 的运行环境

一、node.js 是什么 ？

Node.js 不是JS应用、而是JS运行平台

Node.js 采用C++语言编写而成,是一个 Javascript 的运行环境

1、node.js 不是一门语言，不是库，不是框架，只是一个 javaScript 运行时环境。简单的说 node.js 可以解析 javaScript

2、node.js 的优点: 快，性能高，开发效率高，应用范围广

3、node.js 的包管理器 npm，是全球最大的开源库生态系统。绝大多数JavaScript相关的包都存放了 npm 上

4、Node.js采用事件驱动、异步编程, 为网络服务而设计

二、npm 是什么 ？

npm包管理器，是集成在 node.js 中的

1、npm 是 Node.js 的 包 管理器。而 包 就是别人写好的 node.js 模块

2、使用 npm包 的前提是你的当前目录本身就是一个 npm 包

3、执行 npm init 生成 package.json

4、package.json 说明这个目录表达的是一个 npm 包

5、只要这个目录是 npm包，那就可以安装其他 npm包

6、所以在 nodejs 项目开始前，都应声明成 npm包，这样才能方便的去安装其他的 npm包

7、安装其他的包  npm install

8、如果使用 npm下载的速度过慢，可以使用淘宝的 cnpm 镜像

   npm install -g cnpm –registry=https://registry.npm.taobao.org
   
   输入以上命令即可将 npm 指向国内镜像，使用时需将 npm 替换成 cnpm 即可

创建 vue 项目

方式一： 使用 vue-cli 脚手架 创建

一、什么是 vue-cli ？

1、vue-cli 是 vue 脚手架，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板

2、vue-cli 是由Vue提供的一个官方 cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成 vue.js+webpack 的项目模板

二、安装 vue-cli

  npm install -g @vue/cli
  
  查看 @vue/cli 版本，确保 @vue/cli 版本在4.5.0以上
  
  vue --version 或 vue -V 

三、使用 vue-cli 创建 vue 项目

vue create "项目名"

=> 按步骤 选择相关配置 （ 可选择 vue2 或 vue3 、Ts Eslint 等）

方式二： 使用 vue-cli 提供的 可视化的项目管理工具 vue ui 创建

执行命令 vue ui 

按可视化步骤操作即可

方式三： 使用 vite 创建

一、什么是 vite ？

Webpack 和 Vite 同是打包工具

Vite（法语意思是 “快”）是一种全新的前端构建工具。可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，类似 webpack + webpack-dev-server

但是更轻更快， Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验

vite 是一个基于 Vue3 单文件组件的非打包开发服务器

vite 是新一代前端构建工具 优势如下

1、开发环境中，无需打包操作，可快速的冷启动

2、轻量快速的热重载(HMR)

3、真正的按需编译，不再等待整个应用编译完成

二、使用 vite 创建 vue 项目

npm init vite-app "项目名称"

方式四：webpack 从零开始搭建 vue 项目

第一步

使用 npm init 命令 生成 package.json 文件

npm init

第二步

引入 webpack   npm install webpack --save-dev

第三步

在项目中创建 webpack.config.js 文件

const path = require('path')
module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"demo.js"
    }
}

第四步

使用 webpack 命令编译：  webpack

第五步

引入vue 及其他 包

npm install vue --save

.....

webpack.config.js 文件示例

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "demo.js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'vue demo',
            template: 'index.html'
        })
    ],
    devServer:{
        contentBase:"./dist"
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
    }
}

vue3 项目 文件 示例

main.js

// 引入的不再是Vue构造函数了
// 引入的是一个名为 createApp 的工厂函数

import { createApp } from 'vue'

import App from './App.vue'

// 创建应用实例对象--app(类似vue2中的vm,但更“轻”)

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

App.vue

<template>
  <!--vue3组件中模板结构可以没有根标签-->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
......
</style>