搭建Vue项目

1. 所需知识储备

需要了解的知识:

  node.js ;npm ;webpack ;vue2 ; iview

 2. 搭建VUE的开发环境

步骤1:安装nodejs

  查看本机是否已经安转以及是否安装完成;

     

步骤2:安装淘宝镜像,既可以用cnpm代替npm;

  npm install -g cnpm –registry=https://registry.npm.taobao.org

  

  检查是否安装成功:cnpm -v

步骤3:安装vue的脚手架工具

  npm install --global vue-cli

   

步骤4:进入工程目录,基于webpack 模板创建vue的工程

  

说明:

    Vue build ==> 打包方式,回车即可;

    Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

    Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

    Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

    Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

步骤5:进入项目:cd vue-demo,安装依赖

  

步骤6:在IDEA中打开文件,项目结构如下:

  

步骤7:启动--右击package.json,选择show npm scripts, 然后执行start

  

    启动成功界面

3. vue的工程目录介绍

1、build:构建脚本目录

    1)build.js   ==>  生产环境构建脚本;

    2)check-versions.js   ==>  检查npm,node.js版本;

    3)utils.js   ==>  构建相关工具方法;

    4)vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀;

    5)webpack.base.conf.js   ==>  webpack基本配置;

    6)webpack.dev.conf.js   ==>  webpack开发环境配置;

    7)webpack.prod.conf.js   ==>  webpack生产环境配置;

  2、config:项目配置

    1)dev.env.js   ==>  开发环境变量;

    2)index.js   ==>  项目配置文件;

    3)prod.env.js   ==>  生产环境变量;

  3、node_modules:npm 加载的项目依赖模块

  4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;

    5)main.js:入口js文件;

  5、static:静态资源目录,如图片、字体等。不会被webpack构建

  6、index.html:首页入口文件,可以添加一些 meta 信息等

  7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息

  8、README.md:项目的说明文档,markdown 格式

  9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

4. idea开发vue的配置

  4.1 让html支持vue的语法指令

  在以下位置填写以下代码:

@tap
@tap.stop
@tap.prevent
@tap.once
@click
@click.stop
@click.prevent
@click.once
@change
@change.lazy
@change.number
@change.trim
v-model
v-for
v-text
v-html
v-show
v-if
v-else-if
v-else
v-pre
v-once
v-bind
scoped

  

    4.2 让 .VUE 文件支持 HTML 语法和支持以上设置的代码提示

   

 

posted @ 2019-07-16 10:16  zlAdmin  阅读(116)  评论(0)    收藏  举报