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


 

Logo

前往低代码交流专区

更多推荐