精华内容
下载资源
问答
  • 使用 vue-lic3 创建 vue 项目

    千次阅读 2018-12-14 16:28:44
    使用 vue-lic3 创建 vue 项目 在使用 vue-lic3 创建 vue 项目工程之前首先要确保已经安装了 nodejs,webpack vue-cli 是 vue 的脚手架,可以用配置好的模版快速搭建起一个项目工程,不用自己去配置 webpack 配置...

    使用 vue-lic3 创建 vue 项目

    • 在使用 vue-lic3 创建 vue 项目工程之前首先要确保已经安装了 nodejs,webpack
    • vue-cli 是 vue 的脚手架,可以用配置好的模版快速搭建起一个项目工程,不用自己去配置 webpack 配置文件的基本内容。
    • 安装 vue-cli 3.0 版本:通过 npm install -g @vue/cliyarn global add @vue/cli安装 vue-cli 3

    注意:如果已经安装了旧版本,可以使用 npm uninstall vue-cli -gyarn global remove vue-cli卸载旧版本,然后再安装新版本。

    • 安装完后使用 vue -V检查版本,出现如下界面表示安装成功。
      在这里插入图片描述
    • 现在开始创建我们的 vue 项目工程,进入到你要创建项目的文件或磁盘,比如我想在 G 盘创建项目,那就在 G 盘输入命令 vue create my-project
      在这里插入图片描述
    • 它会自动在 G 盘创建一个 my-project 的工程文件夹,按 enter 进入下一步出现如下界面。
      在这里插入图片描述
      这里有两个选项,第一个是默认的,第二个提供更多的选择,可以选择自己需要的功能,我这里选择第二个,按 enter 会看到如下界面。
      在这里插入图片描述
      这里有九个选项,按方向键切换当前选项,按空格键选中当前选项,我说一下这九个选项的意思:
    • Babel:提供 babel 支持。
    • TypeScript:支持 TypeScript 格式。
    • Progressive Web App (PWA) Support:PWA 支持(渐进式Web应用程序)。
    • Router:支持 Vue Router ,它是Vue.js 官方的路由管理器。
    • Vuex:支持 Vuex ,它是一个专为 Vue.js 应用程序开发的状态管理模式。
    • CSS Pre-processors:支持 CSS 预处理器,可以选择自己想要的处理器。
    • Linter / Formatter:

    Linter检查代码错误的小工具。
    Formatter用来格式化文本,主要用在文本输出方面,比如,数字、日期、金额等。

    • Unit Testing支持单元测试。
    • E2E Testing支持 e2e 测试。

    e2e 测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。

    本次选择如下: (按方向键切换当前选项,按空格键选中当前选项)
    在这里插入图片描述
    按 enter 进入下一步。
    在这里插入图片描述
    路由是否使用历史模式,我选择 Y ,按 enter 进入下一步。
    在这里插入图片描述
    选择CSS预处理器,我选 Sass/SCSS ,按 enter 进入下一步。
    在这里插入图片描述
    选择 linter / formatter 配置,使用方向键选择,我选第一个,按 enter 进入下一步。
    在这里插入图片描述
    第一个需要设置保存的路径,我选择第二个,按 enter 进入下一步。
    在这里插入图片描述
    这一步选择配置文件的位置,出于对 vscode 的友好支持,我选择第一个,按 enter 进入下一步。
    在这里插入图片描述
    要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用,我选 no,按 enter 进入下一步,这时就开始自动配置了。
    在这里插入图片描述

    • 至此 vue 项目工程创建完毕,系统提示你进入项目文件夹,然后启动项目:
      在这里插入图片描述
      输入 cd my-project按回车,再输入 npm run serve按回车,会出现如下界面表示项目已经启动:
      在这里插入图片描述
      现在可以在浏览器输入 http://localhost:8080会看到这个界面 。
      在这里插入图片描述
    展开全文
  • vue-lic3 引用cdn的js链接 应业务需要,后端工程师跑来干前端,之前用过vue-lic2引用了cdn后可以直接使用,但是vue-lic3中失效。 在网上找了一些方法,都是说需要先在vue.config.js中配置,在ts中引用。 后来发现...

    vue-lic3 引用cdn的js链接

    应业务需要,后端工程师跑来干前端,之前用过vue-lic2引用了cdn后可以直接使用,但是vue-lic3中失效。 在网上找了一些方法,都是说需要先在vue.config.js中配置,在ts中引用。 后来发现window.可以直接使用该方法。

    index.html引入:

    <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
    

    ts中使用

        created() {
            //打印时间
            alert(window.moment());
        },
    

    cdn链接摘自:https://www.cnblogs.com/smzd/p/10393809.html

    展开全文
  • 安装vue-cli 3 cnpm install -g @vue/cli@3.11.0 安装vuex npm install vuex --save 在assets文件同级目录新建store文件夹,里面新建index.js文件 import Vue from 'vue' import Vuex from 'vuex' import axios from...

    删除vue-cli
    cnpm uninstall vue-cli -g
    安装vue-cli 3
    npm install -g cnpm --registry=https://registry.npm.taobao.org (淘宝源)
    cnpm install -g @vue/cli@3.11.0

    安装vuex
    npm install vuex --save

    在assets文件同级目录新建store文件夹,里面新建index.js文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    import axios from 'axios'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state: {
            user: {}, shops: [], baseUrl: 'http://plateform.com:81', shopInfo: {}
        },
        getters: {
            user(state) {
                return state.user;
            },
            shops(state) {
                return state.shops;
            },
            baseUrl(state) {
                return state.baseUrl;
            },
            shopInfo(state) {
                return state.shopInfo;
            }
        },
        mutations: {
            setUser(state, user) {
                state.user = user
            },
            setShops(state, shops) {
                shops.forEach((v) => {
                    state.shops.push(v)
                })
            },
            setShopInfo(state, shopInfo) {
                state.shopInfo = shopInfo;
            }
        },
        actions: {
            //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
            getShopInfo({state, commit}, param) {
                return new Promise((resolve,reject)=>{
                    console.log('getShopInfo')
                    axios.get(state.baseUrl + '/api/shop/' + param.id)
                        .then((data) => {
                            console.log(data)
                            commit('setShopInfo', data.data)
                            resolve();
                        })
                        .catch((err) => {
                            console.log(err)
                            reject();
                        })
                })
            }
        }
    })
    
    

    安装 router
    npm install vue-router

    router.js的内容,在和App.vue同级新建router文件夹,然后新建index.js(也可以取名router.js)

    import Vue from 'vue'
    import Router from 'vue-router'
    import Index from './views/Index.vue'
    
    Vue.use(Router)
    
    export default new Router({
        routes: [
            {
                path: '/',
                name: 'index',
                component: Index
            },
            {
                path: '/about',
                name: 'about',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
            },
            {
                path: '/info/:id',
                name: 'info',
                component: () => import('./views/ShopInfo.vue')
            }
            ,
            {
                path: '/guid',
                name: 'guid',
                component: () => import('./views/Guid.vue')
            }
        ]
    })
    
    

    安装anxios
    Npm install axios -S

    安装element ui
    npm i element-ui -S

    <template>
    <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="text">文字按钮</el-button>
    </div>
    </template>
    <script>
    export default {
    name: 'hello',
    data () {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    }
    }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
    font-weight: normal;
    }
    ul {
    list-style-type: none;
    padding: 0;
    }
    li {
    display: inline-block;
    margin: 0 10px;
    }
    a {
    color: #42b983;
    }
    </style>
    

    关于main.js

    import Vue from 'vue'
    import App from './App.vue'
    import store from './store'//引入sotre
    import router from './router'//引入router
    import axios from 'axios'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);
    
    Vue.config.productionTip = false
    //router.beforeEach((to, from, next) => {
    //    console.log('进入守卫')
    //    console.log(to)
    //})
    new Vue({
        store,
        router,
        render: h => h(App)
    }).$mount('#app')
    
    

    上述内容部分转载连接:
    https://www.cnblogs.com/joe235/p/12013818.html

    展开全文
  • vue -lic 搭建vue项目

    2020-08-21 14:10:40
    vue -lic 搭建vue项目前言1. 什么是vue-cli?2. 安装vue-cli3.启动并访问项目 目录 前言 前提搭建好NodeJS环境 node -v npm -v 1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目...


    目录

    前言

    前提搭建好NodeJS环境
    node -v
    npm -v

    在这里插入图片描述

    1. 什么是vue-cli?

    vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:

    vue init webpack xxx
    

    注1:xxx 为自己创建项目的名称
    注2:必须先安装vue,vue-cli,webpack,node等一些必要的环境

    2. 安装vue-cli

    命令

    	npm install -g vue-cli
    	npm install -g webpack
    

    安装成功后,会出现如下文件:

     D:\initPath
                 node-v10.15.3-win-x64
                   node_global
                     vue
                     vue.cmd 
                     vue-init
                     vue-init.cmd
                     vue-list
                     vue-list.cmd
    

    安装完成之后打开命令窗口并输入 vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。

    3.启动并访问项目

    命令

    npm run dev xxx
    

    注1:xxx为你的文件名
    注2:项目启动成功后,打开浏览器输入“http://localhost:8080”即可
    注3:vue-cli构建的项目,在控制台npm run dev启动后,默认的调试地址是8080端口的但是大部分时候,
    我们都要并行几个项目开发,很有可能已经占用了8080端口,所以就涉及到如何去更改调试地址的端口号了
    config --> index.js

    		 dev: {
              // Paths
              assetsSubDirectory: 'static',
              assetsPublicPath: '/',
              proxyTable: {},
              host: 'localhost', 
              port: 8083,       // 在这里修改端口号
              autoOpenBrowser: false,
              errorOverlay: true,
              notifyOnErrors: true,
            },
    
    展开全文
  • 1.安装node环境(安装node时候会自动安装npm) ... 2.安装vue的脚手架工具vue-cli // 全局安装 ...3.使用vue-cli初始化webpack项目(在这里用的是cmd,可以选择选项) vue init webpack test-project// ...
  • 使用 vue-lic3.0 快速构建项目 安装前需要注意的地方: Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g或yarn global ...
  • 配置less 修改webpack.config.js配置文件 { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } npm下载安装包,-D代表使用....vue文件添加样式,加上scoped是为了在当前vue文件下
  • 1.安装font-awesome npm i font-awesome --production 2.在main.js中引用 ...import 'font-awesome/css/font-...3.应用 <i class="fa fa-camera-retro fa-lg"></i> 转载于:https://www....
  • 'use strict' // 该文件用于检测node和npm的版本,实现版本依赖 //chalk 是一个用来在命令行输出不同颜色文字的包,可以使用chalk.yellow("想添加颜色的文字....") //来实现改变文字颜色的;...
  • vue-lic脚手架安装与部署项目流程

    千次阅读 2018-08-21 15:31:22
    安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步... 另外nodejs就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。 注意: 安装目录,...
  • ./views/About.vue ' ) } webpackChunkName 注释的webpackChunkName就类似于起了一个别名  参考地址: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html 把组件按组分块 ...
  • bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['4-5', '4-6', '4-7', '4-8', '4-9'] }, yAxis: { type:...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 317
精华内容 126
关键字:

vue-lic3

vue 订阅