Vue项目组成逻辑文件关系和作用

Vue2 Webpack
Vue
发布日期:   2023-01-02
更新日期:   2023-03-01

Vue项目组成逻辑文件关系和作用

手动创建Vue项目

创建项目基础文件

  1. 创建项目目录mkdir egg-big，切换到项目目录 cd egg-big

  2. 创建index.html

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

  3. 创建App.vue

  4. 创建main.js

    import &#123; createApp &#125; from 'vue'
import App from './App.vue'

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

  5. 终端输入 npm init -y 生成package.json

    package.json：简易包管理文件

  6. 终端输入 npm install vue 生成 node_modules 文件夹

    node_modules/：项目依赖文件

    package-lock.json： 详细包管理文件

  7. 创建src文件夹，并将index.html、App.vue、main.js 移入，src文件夹就是开发的源文件夹

  8. 在项目根目录创建webpack.config.js 用于配置Webpack

  9. 安装Webpack依赖

    npm i -D webpack webpack-cli webpack-dev-server

    webpack-dev-server：类似于 vscode 的 live server

    -D：表示安装的是开发环境的依赖，并不放在生产环境上

  10. 安装Babel

    npm i -D babel-loader @babel/core @babel/preset-env

    并不是每个浏览器都能识别并处理ES6语法，需要Babel将代码从高版本转成低版本

  11. 安装vue-loader 使浏览器识别Vue单文件组件

    npm i -D vue-loader vue-template-compiler css-loader vue-style-loader html-webpack-plugin

    vue-template-compiler css-loader：css识别依赖

    html-webpack-plugin：将源文件的HTML和JS合并，并生成最终的文件夹和文件

  12. 编辑webpack.config.js

    const HtmlWebpackPlugin = require('html-webpack-plugin');
const &#123; VueLoaderPlugin &#125; = require('vue-loader');
module.exports = &#123;
    entry: './src/main.js',
    module: &#123;
        rules: [
            &#123; test: /\.js$/, use: 'babel-loader' &#125;,
            &#123; test: /\.vue$/, use: 'vue-loader' &#125;,
            &#123; test: /\.css$/, use: ['vue-style-loader', 'css-loader'] &#125;
        ]
    &#125;,
    plugins:[
        new HtmlWebpackPlugin(&#123;
            template:'./src/index.html',
        &#125;),
        new VueLoaderPlugin(),
    ],
&#125;;

  13. 项目根目录创建.babelrc.js 配置babel

    module.exports =&#123;
    presets:['@babel/preset-env'],
&#125;

  14. 编辑package.json，修改scripts的内容

    "scripts": &#123;
    "serve": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  &#125;,

    运行npm run serve：生成模仿http服务器，http://localhost:8080 预览项目

    运行npm run build：构建生产版本，生成dist文件夹

  15. 终端输入git init ，项目根目录创建.gitignore、README.md

  16. 编辑.gitignore

    node_modules

  17. 项目根目录创建jsconfig.json

    &#123;
    "compilerOptions": &#123;
        "target": "ES5",
        "module": "esnext",
        "baseUrl": "./",
        "moduleResolution": "node",
        "paths": &#123;
            "@/*": [
                "src/*",
            ]
        &#125;,
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    &#125;
&#125;

    Vue有Vue Cli 和 Vite 可以创建项目，Vue Cli基于Webpack

    Vue Cli 脚手架创建Vue项目

    vue create [项目名称]

    项目名称：不可有大写英文字母

    src/assets/：用来存放图片和字体等

    src/components/：组件文件夹

    public/：存放静态资源，不需要打包的文件

文章作者: ききょう
文章链接: http://example.com/2023/01/02/vue/vue-xiang-mu-zu-cheng-luo-ji-wen-jian-guan-xi-he-zuo-yong/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 ききょう !
Vue2 Webpack