Vue安装

介绍

Vue, 介绍是一个基于Node.js前端开发框架. w3cschool

View <-> ViewModel <-> Model

vue可以把请求数压缩到一个, 减少了服务器压力而且vue可以自动寻找一个可用的端口(从8080开始逐个尝试), 在使用 npm run serve

安装node.js

官网下载即可. 主要是利用 npm 工具进行包管理

换源

# 以后可以用cnpm代替 npn进行使用
 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vscode

下载vscode
安装简体中文插件

如果没有自动切换的话,就 `ctr+shift+p` ,输入 `Configure display language`

Cli2

前端知识

HTML DOM(文档对象)树

Vue-cli

npm install -g @vue/cli

注意一定要有 @ , 否则下载的是Vue2

脚手架, 用于快速构建项目. 切换npm存储位置切换后设置环境变量

创建项目

vue create his-ui

# 选择 Manually select features,并选择如下组件 (空格选择,回车结束)
# Bable
# Router
# Vuex
# CSS Pre-processors

# 等待安装

# Use history mode for router? y

# Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 这个选中喜欢的风格,上下移动,回车确认
# Where do you prefer placing config for Babel, ESLint, etc.?    选择In dedicated config files.
# Save ...    y
# Save preset 回车

cd his-ui
npm run serve 

尽量不要用idea打开前端的文件夹

安装element插件

github地址官网地址

在刚建好的工程文件夹下执行如下命令

# 最好是管理员cmd执行,否则容易报错.在之后的选择中选 Fully import
vue add element
# 玄学问题,如果只执行上面这个,不执行下面这个就会报错,而且都要管理员执行
npm install --save element-ui

启动项目时可以不用管理员执行.

项目结构

node_modules : 模块

public : 公开可访问的资源

src/ : assets : 资源 compoents : 组件 router : 跳转 store : views : 视图组件

主要文件 : App.vue : 入口组件, vue文件组成: template script style

main.js : 入口js文件 package.json : 包管理文件(管理各个环境下的命令)

运行流程

public/index.html : <div id="app"></div> 中渲染内容 src/main.js : 将组件渲染到index.html的app中 App.vue : 显示内容

常见错误

vscode终端不能识别系统设置的环境变量

重启vscode即可

cnpm install 报错 code 128

这个是个玄学错误, 好像是因为协议的问题, 还是蛮常见的

git config --global url."https://".insteadOf git://

Cannot find module ‘core-js/modules/es6.regexp.constructor’

参考资料

「Web开发-Vue」 Vue安装