|
开发环境 [size=13.3333px]Win 10 [size=13.3333px]node-v10.15.3-x64.msi [size=13.3333px]下载地址： [size=13.3333px] 安装node安装vue-cli[size=13.3333px]1、安装node-v10.15.3-x64.msi [size=13.3333px] [size=13.3333px]2、设置注册地址 [size=13.3333px]因为npm官方仓库在国外，有时候下载速度会非常慢，不过有淘宝镜像可以使用，下载包的速度很快。而且淘宝镜像是定时更新同步npm的官方仓库的。 [size=13.3333px] [size=13.3333px] [size=13.3333px]这样，npm在执行安装包的命令时，会先从淘宝镜像去下载包。 [size=13.3333px]如果不设置，安装包过程中可能出现如下错误 [size=13.3333px] ![]()
[size=13.3333px]npm ERR! code Z_BUF_ERROR [size=13.3333px]npm ERR! errno -5 [size=13.3333px]npm ERR! zlib: unexpected end of file [size=13.3333px] [size=13.3333px]npm ERR! A complete log of this run can be found in: [size=13.3333px] [size=13.3333px]3、安装全局脚手架工具vue-cli [size=13.3333px]npm install vue-cli -g [size=13.3333px] 创建vue项目[size=13.3333px]1、进入到存放项目根目录，执行vue-init webpack <package>命令 [size=13.3333px]cd /d E:\MyProjects\TMP [size=13.3333px]E:\MyProjects\TMP>vue-init webpack frontend [size=13.3333px]? Project name (frontend)待输入项目名，可直接按Enter键，或者输入其它（括号中都部分为默认值，下同） [size=13.3333px]? Project description (A Vue.js project) 待输入项目名，可直接按Enter键，或者输入其它 [size=13.3333px]? Author待输入作者名称 [size=13.3333px]? Vue build (Use arrow keys) [size=13.3333px]> Runtime + Compiler: recommended for most users运行时编译，可按上下方向键切换选项，选好后按Enter键，到此处可直接按Enter键 [size=13.3333px] Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 只运行时 [size=13.3333px]? Install vue-router? (Y/n) 是否安装vue-router输入Y，按Enter键 [size=13.3333px]? Use ESLint to lint your code? (Y/n) 是否在代码中使用ESLint输入n，按Enter键 [size=13.3333px]? Set up unit tests (Y/n) 输入n,按回车键，即不设置单元测试 [size=13.3333px]? Setup e2e tests with Nightwatch? (Y/n) 是否使用E2E 黑盒测试，输入n,按回车键， [size=13.3333px]? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) [size=13.3333px]> Yes, use NPM 项目创建后是否运行npm install按上下方向键选择，此处可选择该项，直接回车，如果选择No, I will handle that myself,则执行npm run dev之前，需要执行npm install [size=13.3333px] Yes, use Yarn [size=13.3333px] No, I will handle that myself [size=13.3333px]... 略 [size=13.3333px]cd frontend [size=13.3333px] npm run dev [size=13.3333px]... 略 [size=13.3333px] [size=13.3333px]注意： [size=13.3333px]1、 执行vue-init命令后，会出现交互式等待，等待输入、选择(通过按方向键)，具体输入、选择如上 [size=13.3333px] [size=13.3333px]2、验证 [size=13.3333px]E:\MyProjects\TMP>cd frontend [size=13.3333px]E:\MyProjects\TMP\frontend>npm run dev [size=13.3333px]……略 [size=13.3333px]15:16:15 I Your application is running here: http://localhost:8080 [size=13.3333px] [size=13.3333px]浏览器访问： [size=13.3333px] ![]()
[size=13.3333px] [size=13.3333px]至此，项目文件结构如下 [size=13.3333px] ![]()
[size=13.3333px] 运行编译vue项目[size=13.3333px]1、修改frontend/index.html，如下，添加一下带背景色内容<p>hello my vue</p> [size=13.3333px] <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>frontend</title></head><body><div id="app"></div><!-- built files will be auto injected --><p>hello my vue</p></body></html> 2、在vue项目根目录(例中为frontend目录)下，cmd命令行运行npm run build，运行完成后，会在当前目录下生成dist目录，里面包含一个 index.html 和一个文件夹static。[size=13.3333px]![]()
[size=13.3333px] [size=13.3333px]参考链接： [size=13.3333px] 安装element-ui[size=13.3333px]E:\MyProjects\TMP>cd frontend [size=13.3333px]E:\MyProjects\TMP\frontend>npm i element-ui [size=13.3333px]注意，如上，先要进入vue项目所在目录(例中为frontend目录)，然后执行 npm i element-ui命令，不然后面运行会出现以下错误： [size=13.3333px] ![]()
[size=13.3333px] [size=13.3333px]如果需要按需引用element-ui,继续执行以下命令 [size=13.3333px]npm install babel-plugin-component –D [size=13.3333px] 修改main.js[size=13.3333px] [size=13.3333px]修改main.js文件 [size=13.3333px]两种导入方式 [size=13.3333px]1、 导入整个element-ui [size=13.3333px] ![]()
[size=13.3333px] [size=13.3333px]2、按需引用（假设插件已经安装） [size=13.3333px] ![]()
[size=13.3333px] 修改App.vue[size=13.3333px]如下，修改、添加带背景色内容 [size=13.3333px]<template> [size=13.3333px]<div id="app"> [size=13.3333px]<img src="./assets/logo.png"> [size=13.3333px]<router-view/> [size=13.3333px]<el-input v-model="input" placeholder="请输入内容">输入框</el-input> [size=13.3333px]</div> [size=13.3333px] [size=13.3333px]</template> [size=13.3333px] [size=13.3333px]<script> [size=13.3333px]export default { [size=13.3333px] name: 'App', [size=13.3333px] data() { [size=13.3333px] return { [size=13.3333px] input: '' [size=13.3333px] } [size=13.3333px] } [size=13.3333px]} [size=13.3333px]</script> [size=13.3333px] [size=13.3333px]<style> [size=13.3333px]#app { [size=13.3333px] font-family: 'Avenir', Helvetica, Arial, sans-serif; [size=13.3333px] -webkit-font-smoothing: antialiased; [size=13.3333px] -moz-osx-font-smoothing: grayscale; [size=13.3333px] text-align: center; [size=13.3333px] color: #2c3e50; [size=13.3333px] margin-top: 60px; [size=13.3333px]} [size=13.3333px]</style> 浏览验证[size=13.3333px] ![]()
[size=13.3333px]
| 
收藏
淘帖
踩
