基于vue-cli(vue脚手架)搭建Vue项目总结

作者:神秘网友 发布时间:2020-08-29 00:32:18

基于vue-cli(vue脚手架)搭建Vue项目总结

基于vue-cli(vue脚手架)搭建Vue项目总结

                                      基于vue-cli(vue脚手架)搭建Vue项目总结

一、运行环境

      node (v8.12.0) (官网下载安装)+ npm(Node.js的包管理工具) (6.4.1) + Vue(构建用户界面的渐进式框架)(2.9.6) + Intellij IDEA

      在之前已安装过node 、npm(npm install -g npm),通过node -v 、 npm -v 查看已安装的版本号,验证是否安装成功。下面主要是安装、配置Vue相关的开发环境。

1、安装脚手架vue-cli

   全局安装vue-cli,安装完成后,可通过vue -V查看vue的版本号。

sudo npm install -g vue-cli 

2、Intellij idea安装依赖插件

Preferences - > Plugins 下搜索Vue.js, 安装对Vue的支持。 

 

二、实例总结

1、快速创建vue项目

# vue init webpack testvue

基于vue-cli(vue脚手架)搭建Vue项目总结

备注:

1.Vue build:                      # 打包方式

2.Install vue-router?       # 安装vue-router, 项目中会用到,Y需要安装

3.Use ESLint to lint your code? # 是否需要js语法检测

4.Pick an ESLint preset       

5.Set up unit tests                    # 是否安装单元测试工具

6.Setup e2e tests with Nightwatch?   # 是否需要端到端测试工具

7.Should we run `npm install` for you after the project has been created? (recommended)    # 安装依赖,如果选择No, 也可通过cnpm i 安装

 

2、第一个页面

2.1 目录结构

       实际在Intellij idea中会提示js错误,默认javascript的版本不够导致。 在Preferences | Languages & Frameworks | JavaScript 下修改JavaScript language version即可。

基于vue-cli(vue脚手架)搭建Vue项目总结

备注:

1.build:  构建脚本目录

2.config: 项目配置

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: 静态资源目录

6.index.html: 首页入口文件

7.package.json: npm包配置文件

8.README.md: 说明文档

9. .XXX文件:一些配置文件,包括语法配置,git配置等

2.2 实践 

1)components下新建Test.vue

template:写html等;

script:js

style:样式

<template>
    <div>
      <h1>hi, {{msg}} ! </h1>
    </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      msg: 'Test first'
    }
  }
}
</script>

<style scoped>

</style>

2)在router/index.js中配置路由路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'         # import

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/test',                  # /test跳转test.vue
      name: 'Test',
      component: Test
    }
  ],
  mode: 'history'
})

3)在HelloWord主页下加入跳转Test

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <p><router-link to="/test">next-></router-link></p>    # router-link
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2.3、run

npm run dev   # serve with hot reload at localhost:8080

   编译成功后访问http://localhost:8080可查看效果:

    基于vue-cli(vue脚手架)搭建Vue项目总结

 

运行结果:

基于vue-cli(vue脚手架)搭建Vue项目总结

基于vue-cli(vue脚手架)搭建Vue项目总结

2.4 其他配置:

config/index.js: 配置端口号(避免冲突)、或者自动打开浏览器

基于vue-cli(vue脚手架)搭建Vue项目总结

 

 

基于vue-cli(vue脚手架)搭建Vue项目总结相关教程

  1. Vue项目一键远程发布(upload to remote)全流程配置
  2. 基于Docker + Nodejs + Kafka + Redis + MySQL的秒杀已经Jmeter
  3. node+vue实现用户注册--头像上传
  4. springboot-vue-oracle 装配
  5. 基于遗传算法的公交排班系统
  6. 新手学vue.js(一)基础入门
  7. 基于机器学习的信用卡之行为评分卡是如何建立的
  8. 基于taro开发微信小程序,注意事项及遇到的坑