Vue-cli 脚手架创建以及打包发布项目

超、凢脫俗 2023-06-03 12:53 62阅读 0赞

### 文章目录 ###

*   *  准备环境
     *  下载模板
     *  运行项目
     *   *  项目结构
         *  创建一个子组件
     *  根组件
     *   *  入口函数
     *  打包发布项目
     *   *  安装静态服务器
         *  打包
         *  运行

## 准备环境 ##

我这边已经准备好

node.js  
npm  
webpack 打包工具  
vue-cli vue 脚手架

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]

## 下载模板 ##

然后利用vue-cli 脚手架下载vue模板项目

输入命令 ：

> vue init webpack `项目名`

然后选择确认项目名以及项目描述，作者，是否使用路由，测试等等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]

完成之后开始进行下载

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]

下载完成后命令行会提示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 3]

## 运行项目 ##

切换到 创建好的项目中

运行命令 npm run dev 启动项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 4]

然后项目启动成功，我这里是8081 端口 ，原因是我8080已经启动了一个Vue项目了。

打开浏览器访问 http://localhost:8081/

出现下面页面表示项目构建和启动成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 5]

用webstorm 打开可以看到项目结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 6]

这里我再创建一个项目vue-demo，照着此脚手架写一个helloworld

### 项目结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 7]

### 创建一个子组件 ###

HelloWorldTest.vue

<template>
    
      <div class="hello">
        <h1>{
       { msg }}</h1>
      </div>
    </template>
    
    <script> // 固定写法，向外暴露一个page对象 export default { //配置对象（与vue一致） name: 'HelloWorldTest', data () { // 组件里必须写函数 return { msg: 'hello world and vue Component ..... ' } } } </script>
    
    <style> h1 { font-weight: normal; } hello a { font-size: 30px; color: #42b983; } </style>

## 根组件 ##

App.vue

<template>
      <div id="app">
        <img src="./assets/logo.png" alt="logo">
    
        <HelloWorldTest/>
      </div>
    </template>
    
    <script> //1 、 引入子组件 import HelloWorldTest from './components/HelloWorldTest' export default { name: 'App', // 2 、映射组件标签 components: { // HelloWorldTest:HelloWorldTest.vue HelloWorldTest } } </script>
    
    <style> #app { text-align: center; width: 200px; height: 400px; background-color: aquamarine; color: #2c3e50; margin-top: 60px; margin-left: 45%; } </style>

### 入口函数 ###

/* 入口js: 创建Vue实例 */
    //引入vue
    import Vue from 'vue'
    //引入 根组件
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    
    new Vue({ 
      //绑定dom
      el: '#app',
      // 映射标签
      components: {  App },
      //使用组件标签
      template: '<App/>'
    })

首页

<!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>
        
      </body>
    </html>

运行

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 8]

## 打包发布项目 ##

### 安装静态服务器 ###

全局安装

> npm install -g server

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 9]

### 打包 ###

> npm run build

项目中会有个dist文件 就是打包后的项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 10]

### 运行 ###

> server dist

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 11]

访问 http://localhost:5000/ 或者 http://192.168.10.194:5000/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]: /images/20230601/7c994723078445568c237ca9616846fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]: /images/20230601/7fcab2c000204097ad1721600f06b55e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]: /images/20230601/ae709a242a0446f68c8fdbbaff11c67d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 3]: /images/20230601/a0ec15513e8e4f86b8c3ce907a5c07dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 4]: /images/20230601/27681e732a6a46518909608d588d42a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 5]: /images/20230601/0928b869b0764e988ddeb70197201346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 6]: /images/20230601/4e5d9952e1dc45bc8189fd43b4d2774c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 7]: /images/20230601/5287764a21e046f8ae9600b85f287399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 8]: /images/20230601/5b428ea78f844a02a15583ab26c75d20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 9]: /images/20230601/21bf1193f7c64e1392e1c10cee8af33c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 10]: /images/20230601/f0ecc30d25dd4bbeb5b584887515da7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 11]: /images/20230601/57be73d3c09547ba9832ca6c2ace7fba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 12]: /images/20230601/b7dffc0050ff41f2bd0174912a2130be.png