zoukankan      html  css  js  c++  java
  • vue项目创建

    ## 一.环境搭建
    
    #### 1.安装node
    
    - 去[官网](https://nodejs.org/zh-cn/)下载node安装包
    - 傻瓜式安装
    - 万一安装后终端没有node环境,要进行node环境变量的配置(C:Program Files
    odejs)
    - 可以通过node提供的npm包管理器安装vue脚手架
    - 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)
    
    #### 2.安装全局vue脚手架
    
    - 起管理员终端(mac: sudo)
    - cnpm install -g @vue/cli
    - 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装
    
    #### 3.创建项目
    
    - 采用可视化方式创建(vue ui)
    - 命令行
    
    ```
    1.打开终端
    2.去向目标目录(将项目创建在该目录)(cd 目标目录)
    3.指令创建项目(vue creat 项目名)
    4.选择自定义:Manually select features
    5.用空格选取所需插件:Router, Vuex
    6.采用Router的history...
    7.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目
    ```
    
    #### 4.启动项目
    
    ```
    1.进入项目目录
    2.启动服务器(npm run serve)
    3.退出服务器|刷新服务器(ctrl+c)
    4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)
    ```
    
    #### 5.项目目录
    
    ```
    dist: 打包的项目目录(打包后会生成)
    node_modules: 项目依赖
    public: 共用资源
    src: 项目目标,书写代码的地方
        -- assets:资源
        -- components:组件
        -- views:视图组件
        -- App.vue:根组件
        -- main.js: 入口js
        -- router.js: 路由文件
        -- store.js: 状态库文件
    vue.config.js: 项目配置文件(没有可以自己新建)
    ```
    
    ## 二.项目开发
    
    #### 1.vue.config.js
    
    ```
    module.exports={
        devServer: {
            port: 8888
        }
    }
    // 修改端口,选做
    ```
    
    #### 2.main.js
    
    ```
    // 不用修改
    // 采用之前的语法创建根实例
    new Vue({
        el: "#app",
        router: router,
        store: store,
        render: function (h) {
            return h(App)
        }
    })
    ```
    
    #### 3.*.vue
    
    ```html
    <template>
        <!-- 模板区域 -->
    </template>
    <script>
        // 逻辑代码区域
        // 该语法和script绑定出现
        export default {
            
        }
    </script>
    <style scoped>
        /* 样式区域 */
        /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
    </style>
    ```
  • 相关阅读:
    二分+RMQ/双端队列/尺取法 HDOJ 5289 Assignment
    思维题 HDOJ 5288 OO’s Sequence
    树形DP Codeforces Round #135 (Div. 2) D. Choosing Capital for Treeland
    最大流增广路(KM算法) HDOJ 1853 Cyclic Tour
    最大流增广路(KM算法) HDOJ 1533 Going Home
    最大流增广路(KM算法) HDOJ 2255 奔小康赚大钱
    Complete the Word CodeForces
    Gadgets for dollars and pounds CodeForces
    Vasya and Basketball CodeForces
    Carries SCU
  • 原文地址:https://www.cnblogs.com/xuqidong/p/13211206.html
Copyright © 2011-2022 走看看