(vuejs学习)1、Vue初上手(*)

参考《官方》官方:

Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

使用docker避免污染主机环境,方便迁移。

a.制作运行时docker环境

运行环境需要能及时查看web端页面,使用nginx作为基础镜像:

# Base images nginx.openresty latest
FROM openresty/openresty:stretch
MAINTAINER cffycls@foxmail.com

ENV RESOURCE "\
deb http://mirrors.163.com/debian/ stretch main non-free contrib \n\
deb http://mirrors.163.com/debian/ stretch-updates main non-free contrib \n\
deb http://mirrors.163.com/debian/ stretch-backports main non-free contrib \n\
deb-src http://mirrors.163.com/debian/ stretch main non-free contrib \n\
deb-src http://mirrors.163.com/debian/ stretch-updates main non-free contrib \n\
deb-src http://mirrors.163.com/debian/ stretch-backports main non-free contrib \n\
deb http://mirrors.163.com/debian-security/ stretch/updates main non-free contrib \n\
deb-src http://mirrors.163.com/debian-security/ stretch/updates main non-free contrib \
"
# node + webpack + cnpm 
COPY node.tgz /tmp

RUN echo $RESOURCE > /etc/sources.list && cat /etc/sources.list \
    && mkdir -p /usr/local/node && cd /usr/local/node \
    && tar -xf /tmp/node.tgz --strip-components 1 \
    && sed -i '$a export NODE_PATH=/usr/local/node/bin/' /etc/profile \
    && sed -i '$a export PATH=$PATH:$NODE_PATH' /etc/profile \
    && . /etc/profile && echo $PATH \
        #设置npm仓库镜像为国内淘宝镜像
    && npm config set registry https://registry.npm.taobao.org \
    && npm install -g cnpm --registry=https://registry.npm.taobao.org \
    && ln -s /usr/local/node/lib/node_modules/cnpm/bin/* /usr/local/bin \
        #全局安装 webpack
    && cnpm install -g webpack \
    && cnpm install -g @vue/cli && vue --version

WORKDIR /data

官方vue ui默认端口是8000,启动环境:

[]:~/tmp/dk/vuejs# vim dks.sh
#/bin/bash
docker run -it --name vj -p 8000:8000 -v /root/tmp/dk/vuejs:/data --rm cffycls/vuejs:0.3 bash

需自启动的服务,可以框架搭建好之后,再行添加。 b.启动远程访问 创建一个项目 vue create hello-world ,容器中无对话框,完成后,按照提示 cd hello-world && npm run serve ,显示8080端口、这里修改成上面的8000。

npm i element-ui -S cnpm install vue-router vue-resource

2.现代前端框架

原文链接:segmentfault.com

上一篇:eslint-config-voltrevo
下一篇:cmp

相关推荐

  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    3 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    2 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    17 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    5 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设置...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    4 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前

官方社区

扫码加入 JavaScript 社区