第一篇 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>