使用vue创建项目

短命女 2023-01-14 00:47 145阅读 0赞

### 使用vue创建项目 ###

*  安装nodejs
 *  npm使用镜像
 *  安装 cnpm
 *  安装 vue 和 vue-cli
 *  Element UI 和 vue的关系
 *  安装sass
 *  基于 webpack 模板的新项目
 *  项目文件结构
 *   *  build 保留各种打包脚本
     *  config 跟部署和配置相关
     *   *  eslint禁用 config\\index.js
     *  dist 打包之后的文件所在目录
     *  node\_modules node项目所用到的第三方包
     *  src 最最核心的源代码所在的目录。
 *  创建一个页面
 *   *  新建一个路由
     *  创建一个新的component
 *  创造可以接收参数的component并调用
 *  通过axios调用在static文件内的json
 *   *  使用 cnpm 安装 axios
     *  修改 main.js，添加下面两行
     *  修改 src\\router\\index.js
     *  新增src\\components\\TestJson.vue
     *  测试url:

http://vue\_book.siwei.me/

# 安装nodejs #

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

C:\Users\Administrator>node -v
    v14.16.1

# npm使用镜像 #

# 临时使用
    C:\Users\Administrator>npm --registry https://registry.npm.taobao.org install express
    # 永久使用
    C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
    # 通过命令查看是否成功
    C:\Users\Administrator>npm config get registry
    C:\Users\Administrator>npm info express
    # 恢复官方地址
    C:\Users\Administrator>npm config set registry http://registry.npmjs.org

# 安装 cnpm #

C:\Users\Administrator>npm -v
    6.14.12
    C:\Users\Administrator>npm install -g cnpm --registry=https://registry.npm.taobao.org
    C:\Users\Administrator>cnpm -v
    win32 x64 10.0.18363
    registry=https://r.npm.taobao.org

# 安装 vue 和 vue-cli #

要同时安装 vue和 vue-cli这两个node package.  
\-g 表示给他们安装成全局可以使用的包。

C:\Users\Administrator>cnpm install vue vue-cli -g
    C:\Users\Administrator>vue -V
    2.9.6

# Element UI 和 vue的关系 #

Element UI官网：`https://element.eleme.cn/2.0/#/zh-CN`

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型

# 安装sass #

node和sass的版本有对应关系

# 查看node版本
    C:\Users\Administrator>node -v
    v14.17.0
    # node v14 对应 node-sass 和 sass-loader版本如下
    C:\Users\Administrator>npm install node-sass@4.13.1 --save-dev
    C:\Users\Administrator>npm install sass-loader@7.3.1 --save-dev
    # 错误安装后可以卸载
    C:\Users\Administrator>npm uninstall node-sass

# 基于 webpack 模板的新项目 #

# 基于 webpack 模板的新项目
    D:\vue_example>vue init webpack my-project
    # 进入初始化的项目目录
    D:\vue_example>cd my-project
    # 安装项目
    D:\vue_example\my-project>cnpm install
    # 运行项目 运行成功可访问： http://localhost:8080
    D:\vue_example\my-project>cnpm run dev

# 项目文件结构 #

▸ build/                // 编译用到的脚本
    ▸ config/               // 各种配置
    ▸ dist/                 // 打包后的文件夹
    ▸ node_modules/         // node第三方包
    ▸ src/                  // 源代码
    ▸ static/               // 静态文件, 暂时无用
      index.html            // 最外层文件
      package.json          // node项目配置文件

## build 保留各种打包脚本 ##

保留各种打包脚本。不可或缺，不要随意修改。  
展开后如下：

▾ build/
    	# 打包使用， 不要修改。
        build.js
        
        # 检查npm的版本， 不要修改。
        check-versions.js
        
        # 是在开发时使用的服务器脚本。不要修改。
        # （借助于node这个后端语言，我们 在做vuejs开发时，可以通过 $npm run dev这个命令，打开一个小的server, 运行vuejs. )
        dev-client.js
        dev-server.js
        
        # 不要修改。 做一些css/sass 等文件的生成。
        utils.js
        
    	# 非常重要的配置文件，不要修改。内容是用来辅助加载vuejs用到的css source map等内容。
        vue-loader.conf.js
    
    	# 这三个都是基本的配置文件。不要修改。
        webpack.base.conf.js
        webpack.dev.conf.js
        webpack.prod.conf.js

## config 跟部署和配置相关 ##

▾ config/
    	# 开发模式下的配置文件，一般不用修改。
        dev.env.js
        
        # 生产模式下的配置文件，一般不用修改。
        prod.env.js
        
        # 很重要的文件， 
        # 定义了开发时的端口（默认是8080），
        # 定义了图片文件夹（默认static)， 
        # 定义了开发模式下的 代理服务器. 我们修改的还是比较多的。
        index.js

### eslint禁用 config\\index.js ###

module.exports = { 
      dev: { 
        useEslint: false
      }
    }

## dist 打包之后的文件所在目录 ##

这个文件夹不要放到git中。

▾ dist/
      ▾ static/
        ▾ css/
            app.d41d8cd98f00b204e9800998ecf8427e.css
            app.d41d8cd98f00b204e9800998ecf8427e.css.map
        ▾ js/
            app.c482246388114c3b9cf0.js
            app.c482246388114c3b9cf0.js.map
            manifest.577e472792d533aaaf04.js
            manifest.577e472792d533aaaf04.js.map
            vendor.5f34d51c868c93d3fb31.js
            vendor.5f34d51c868c93d3fb31.js.map
        index.html

## node\_modules node项目所用到的第三方包 ##

node项目所用到的第三方包，特别多，特别大。 $ npm install 所产生。  
这个文件夹不要放到git中。

## src 最最核心的源代码所在的目录。 ##

▾ src/
    	# 用到的图片
      ▾ assets/
          logo.png
          
        # 用到的"视图"和"组件"所在的文件夹。（最最核心）
      ▾ components/
          Book.vue
          BookList.vue
          Hello.vue
          
        # 路由文件。 定义了各个页面对应的url.
      ▾ router/
          index.js
          
          # 如果index.html 是一级页面模板的话，这个App.vue就是二级页面模板。 
          # 所有的其他vuejs页面，都作为该模板的 一部分被渲染出来。
        App.vue
        
        # 废代码。没有实际意义，但是为了支撑整个vuejs框架，存在很必要。
        main.js

# 创建一个页面 #

创建页面需要两步：

1.  新建路由
2.  新建vue页面

## 新建一个路由 ##

路由文件是 src/router/index.js, 打开之后, 我们增加两行:

import Vue from 'vue'
    import Router from 'vue-router'
    
    // 增加这一行, 作用是引入 First 这个component
    import First from '@/components/First' 
    
    Vue.use(Router)
    export default new Router({ 
      routes: [
        // component定义有两种方式：
        { // 访问url：  http://localhost:8080/#/First02
          path: '/First',
          name: 'First',
          component: First
        },
        { // 增加下面几行, 表示定义了url  http://localhost:8080/#/First02
          path: '/First02',
          name: 'First02',
          component: (resolve) => require(['@/components/First'], resolve)
        }
      ]
    })

## 创建一个新的component ##

我们要创建 src/components/First.vue, 这个文件.  
如下:

<template>
      <div >
        This is my first vue!
      </div>
    </template>
    
    <script>
    export default { 
      data () { 
        return { 
        }
      }
    }
    </script>

# 创造可以接收参数的component并调用 #

src\\components\\vuePlugin\\FirstComponent.vue

<template>
        <div style="border:1px solid yellowgreen; padding: 10px; margin: 1em;">
            <h1>{
       {msg}} : {
       {title}}</h1>
            <select v-if="dataList != null">
              <option :key="item.id" v-for="(item) in dataList">{
       {item}}</option>
            </select>
        </div>
    </template>
    <script> export default { name: '', props: ['title', 'dataList'], data () { return { msg: 'This is my first component !' } } } </script>

src\\components\\Test02.vue

<template>
      <div >
        <FirstComponent title="阳江欢迎您" :dataList="dataList"/>
      </div>
    </template>
    
    <script> import FirstComponent from '@/components/vuePlugin/FirstComponent' export default { components: { FirstComponent }, data () { return { dataList: ['成都', '上海', '广州'] } } } </script>

src\\router\\index.js

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    export default new Router({ 
      routes: [
        { 
          path: '/Test02',
          name: 'Test02',
          component: (resolve) => require(['@/components/Test02'], resolve)
        }
      ]
    })

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

# 通过axios调用在static文件内的json #

## 使用 cnpm 安装 axios ##

cnpm install axios --save

## 修改 main.js，添加下面两行 ##

import axios from 'axios'
    Vue.prototype.$http = axios

## 修改 src\\router\\index.js ##

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

## 新增src\\components\\TestJson.vue ##

<template>
      <div>
        <button @click="ajaxTestFn">Ajax请求</button>
      </div>
    </template>
    <script> export default{ name: 'Forms', components: { }, data () { return { } }, methods: { ajaxTestFn () { this.$http.get('/static/test.json').then(res => { // res是请求到的值 this.menu = res.data console.log(res.data) }) } } } </script>

## 测试url: ##

static\\test.json  
http://localhost:8080/static/test.json

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjY0MjM3_size_16_color_FFFFFF_t_70]: /images/20221022/4afc4afc9f244bde95aa79bb4626c9d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjY0MjM3_size_16_color_FFFFFF_t_70 1]: /images/20221022/e59a9c9e4ac04efa8cba15a318d1cbbe.png