(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

相关推荐

官方社区

扫码加入 JavaScript 社区