node npm vuejs element-ui安装步骤
1.下载对应本机环境安装 nodejs 默认NPM已经集成 https://nodejs.org/zh-cn/ 打开cmd直接输入测试是否安装成功 node测试 node -v NPM 测试 npm -v2.安装淘宝镜像。 打开cmd直接输入:npm install -g cnpm –registry=https://registry.npm.taobao...
1.下载对应本机环境安装 nodejs 默认NPM已经集成
https://nodejs.org/zh-cn/
打开cmd直接输入测试是否安装成功
node测试 node -v
NPM 测试 npm -v
2.安装淘宝镜像。
打开cmd直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装...
cnpm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装webpack 。
cnpm install -g webpack
4.安装vue
cnpm install vue
5.安装 vue-cli。
cnpm install -g vue-cli
6.安装 element-ui。
cnpm i element-ui -S
7.安装 mockjs 演示数据安装(选择安装)
npm install mockjs
8.环境安装完毕 现在可以创建一个项目。
选择项目所在文件夹 shift+右键 选择在此处打开命令窗口
项目创建命令:vue init webpack vue-projectname。
projectname--项目文件夹的名称(名字不能用中文),这个vue-projectname文件夹会自动生成在你跳转到的工作目录中。
vue init webpack vue-projectname
注意:安装过程中,需要自行输入项目名称,描述,作者等等, 按照提示操作。
9.选择项目所在文件夹 shift+右键 选择在此处打开命令窗口 运行命令cnpm install 安装依赖包。
cnmp install
目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录,包括端口号等。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式
10.启动测试项目是否安装成功。
cnpm run dev
注意:打开config目录下的index.js 默认是8080端口 可以修改为你想要的端口号
11.生产环境部署。选择项目所在文件夹 shift+右键 选择在此处打开命令窗口 运行命令
npm run build
注意:dist 下生生成的文件就是我们要部署的文件
相关技术:
vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。
element:基于vuejs2.0的ui组件库。
vue-router:一般单页面应用spa都要用到的前端路由。
vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
更多推荐
所有评论(0)