Nodejs+webpack项目搭建

1.下载对应本机环境安装 nodejs 默认NPM已经集成

https://nodejs.org/zh-cn/

打开cmd直接输入测试是否安装成功

node -v 
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 应用程序开发的状态管理模式。