前端开发Vue-cli 脚手架使用介绍

前端开发百度知道
web前端开发百度传课
前端开发课程百度云

vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于angular.jsvue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用vue.js

一、vue-cli脚手架工具使用介绍
vue-cli可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
使用vue-cli脚手架工具需要提前掌握vue的基础知识,以及对webpack,nodejs,npm等有一定的了解。
使用流程:
javascript 代码

# 全局安装 vue-cli
$ npm install –global vue-cli
# 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
# 安装依赖,走你
    $ cd my-project
    $ npm install
    $ npm run dev
  1、安装vue-cli
   安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v检测你是否安装了npm和版本情况。
   安装cnpm: 
          由于网络原因,使用npm安装可能比较慢,所以我们推荐使用cnpm来安装模块。(我个人还是喜欢用npm)
          打开命令行窗口,在命令行输入下面的命令:
                 npm install -g cnpm --registry=httpsregistry.npm.taobao.org
          安装完cnpm,接下来我们可以用cnpm 命令安装vue-cli:
                 cnpm install vue-cli -g 
          -g :代表全局安装。安装完成后,可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。
          Ps:全局安装的模块只需安装一次,后续项目不用再安装。
  2、初始化项目
        首先进入项目的目标目录,比如www目录。在www目录打开命令行窗口。
        输入以下命令:
               vue init <template-name> <project-name>
        init:表示我要用vue-cli来初始化项目。
        <template-name>:表示模板名称,vue-cli为我们提供了5种模板:
                  webpack-一个全面的webpack+vue-loader+vue-router的模板,功能包括热加载、代码检测、css扩展。
                  webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。Ps这个不包含vue-router,如果不做单页面开发,可以用这个。
                  browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
                  browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
                  simple-一个最简单的单页应用模板。
        <project-name>:项目名称,到时会以这个名称生成一个文件夹。这个可以自己根据项目名称命名。
   在实际开发中,一般我们都会使用webpack这个模板,那我们也以这个模板为例来演示,在命令行输入以下命令:
              vue init webpack vuecli-test
   输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了:
        Project name :项目名称 ,如果不需要更改直接回车就可以了
        Project description:项目描述,默认为A Vue.js project,直接回车,不用编写
        Author:作者,如果你有配置git的作者,他会读取
        Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以输入y
        Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。这里我们不需要,所以输入n。在大型开发团队里最好还是选择此项配置
        setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n
        Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n
    命令行出现上面的文字,说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情:
           1、cd vuecli-test  进入我们的vue项目目录。
           2、cnpm install  安装我们的项目依赖包,也就是安装package.json里的包。
           3、cnpm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。
    出现下面这个页面,说明我们的初始化已经成功了。
3、项目结构
通过以上初始化步骤后,可以在看到项目的目录结构:
Ps:由于版本实时更新和你选择安装的不同(这里列出的是模板为webpack的目录结构),所以你看到的有可能和下边的有所差别。
 **重要文件解读**:
 package.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息(如项目名称、版本、描述、作者等)。
 package.json 里的scripts字段,这个字段定义了你可以用npm运行的命令。在开发环境下,在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js  .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写:
 package.json 里的scripts字段,这个字段定义了你可以用npm运行的命令。在开发环境下,在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js  .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写:
 **json 代码**
“scripts”: {
    “dev”: “node build/dev-server.js”,
    “start”: “node build/dev-server.js”,
    “build”: “node build/build.js”,
    “unit”: “cross-env BABEL_ENV=test karma start test/unit/karma.conf.js –single-run”,
    “e2e”: “node test/e2e/runner.js”,
    “test”: “npm run unit && npm run e2e”
}
 dependencies字段和devDependencies字段
        dependencies字段指项目运行时所依赖的模块;
        devDependencies字段指定了项目开发时所依赖的模块;
 在命令行中运行npm install命令,会自动安装dependencies和devDempendencies字段中的模块。package.json还有很多相关配置,如果你想全面了解,可以专门去百度学习一下。
 **开发文件解读**
     1、npm run build 命令
           如何把写好的Vue网页放到服务器上,主要的命令就是要用到npm run build 命令。我们在命令行中输入npm run build命令后,vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出,你执行的npm run build命令就相对执行的 node build/build.js 。
          在执行完npm run build命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。
          dist文件夹下目录包括:
                index.html文件:因为我们使用单页面开发,所以一般只有一个html文件
                static静态资源文件夹:存放js、css、图片等文件
      2、main.js文件解读
            main.js是整个项目的入口文件,在src文件夹下:
            **javascript 代码**
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import ElementUI from ‘element-ui’
import axios from ‘axios’
import ‘element-ui/lib/theme-default/index.css
Vue.use(ElementUI)
Vue.config.productionTip = false // 生产环境提示,这里设置成了false
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
    el: ‘#app’,
    router,
    template: ‘<App/>’,
    components: { App },
})
             通过代码可以看出这里引进了App的组件和<App/>的模板,它是通过 import App from ‘./App’这句代码引入的。  我们找到App.vue文件,打开查看。
      3、App.vue 文件
           **html 代码**
<template>
    <div>
        <img src=”./assets/logo.png” />
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: ‘app’,
    }
</script>
<style>
    #app {
        font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
           app.vue文件我们可以分成三部分解读:
                <template></template>标签包裹的内容:这是模板的HTMLDom结构,里边引入了一张图片和<router-view></router-view>标签,<router-view>标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。
                <script></script>标签包括的js内容:你可以在这里些一些页面的动态效果和Vue的逻辑代码。
                <style></style>标签包裹的css内容:这里就是你平时写的css样式,对页面样子进行装饰用的,需要特别说明的是你可以用<style scoped></style>来声明这些css样式只在本模板中起作用。
    4、router/index.js 路由文件
            引文在app.vue中我们看到了路由文件,虽然router的内容比较多,但是我们先简单的看一下。下篇文章我们就开始讲Vue-router。
            **javascript 代码**
import Vue from ‘vue’
import Router from ‘vue-router’
import Hello from ‘@/components/Hello’
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: ‘/’,
            name: ‘Hello’,
            component: Hello,
        },
    ],
})
         我们可以看到 import Hello from ‘@/components/Hello’这句话, 文件引入了/components/Hello.vue文件。这个文件里就配置了一个路由,就是当我们访问网站时给我们显示Hello.vue的内容。
   5、hello.vue文件解读
         跟App.vue类似,也是分为<template><script><style>三个部分,以后我们大部分的工作都是写这些.vue结尾的文件。现在我们可以试着改一些内容,然后预览一下。
      **html 代码**
<template>
    <div class=”hello”>
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <ul>
            <li><a href=”https://vuejs.org” target=”_blank”>Core Docs</a></li>
            <li><a href=”https://forum.vuejs.org” target=”_blank”>Forum</a></li>
            <li>
                <a href=”https://gitter.im/vuejs/vue” target=”_blank”
                    >Gitter Chat</a
                >
            </li>
            <li>
                <a href=”https://twitter.com/vuejs” target=”_blank”>Twitter</a>
            </li>
            <br />
            <li>
                <a
                    href=”http://vuejs-templates.github.io/webpack/”
                    target=”_blank”
                    >Docs for This Template</a
                >
            </li>
        </ul>
        <h2>Ecosystem</h2>
        <ul>
            <li>
                <a href=”http://router.vuejs.org/” target=”_blank”
                    >vue-router</a
                >
            </li>
            <li><a href=”http://vuex.vuejs.org/” target=”_blank”>vuex</a></li>
            <li>
                <a href=”http://vue-loader.vuejs.org/” target=”_blank”
                    >vue-loader</a
                >
            </li>
            <li>
                <a href=”https://github.com/vuejs/awesome-vue” target=”_blank”
                    >awesome-vue</a
                >
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: ‘hello’,
        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>

二、适用于pc端的UI库:element-ui
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,适用于开发桌面端运营平台、数据监控平台、管理平台等。
Element-ui官网:Element-ui 官网

         1、安装element-ui:
              在使用vue-cli工具初始化后的项目目录下,执行以下安装命令:
              cnpm install element-ui --save-dev
         2、引入element-ui
               打开main的js,添加以下代码:
                     import ElementUI from 'element-ui';
                     import 'element-ui/lib/theme-default/index.css';
                     Vue.use(ElementUI);
               完成以上两部就可以了,开发者可以在components目录下开发模块并使用element-ui了。
前端开发百度百科
达内前端开发课程百度云盘
前端开发百度云
前端开发点击出现百度地图
» 本文来自:前端开发者 » 《前端开发Vue-cli 脚手架使用介绍》
» 本文链接地址:https://www.rokub.com/6776.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!