vue.js搭建环境

最新推荐文章于 2024-11-05 08:51:06 发布

b67834063218449

最新推荐文章于 2024-11-05 08:51:06 发布

阅读量75

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/summerXll/p/6532961.html

版权

vue.js搭配环境

一、初次安装

1.用命令行安装，推荐使用淘宝镜像，npm install -g cnpm --registry=https://registry.npm.taobao.org用cnpm代替npm

2.cnpm -v

3.安装cnpm install -g vue-cli，脚手架，才可以使用vue命令

4.输入vue,可以看到已经生成了命令，说明vue安装成功。

5.# 创建一个基于 webpack 模板的新项目，my-project代表项目名称

vue init webpack my-project，

6.如果一直是downloading状态，可以尝试这个。

全局安装 vue-cli：npm install --global vue-cli，然后创建一个基于 webpack 模板的新项目：vue init webpack my-project就ok了

记住：

/***************************************新建一个项目*********************************/

1.在一个盘里新建一个文件夹myVue（以H盘为例），

进行H盘下面的myVue文件夹，进行npm init,因为我们的项目要有很多依赖，都是通过npm来管理的，而npm对于我们项目的管理，则是通过package.json文件,一直下一步，会发现文件夹里面已经安装好package.json

H:           //进行H盘
cd myVue     //进入H盘下的myVue文件
npm init　　　//使用npm init安装package.json文件

2.新建一个叫做 app 的目录，这个是我们页面模块的目录，再在app目录下建立一个index目录，假设这个是首页模块的目录，然后再在index目录下建立一个 index.html 文件和 index.js 文件，分别是首页入口html文件和主js文件，然后再在index目录下建立一个components目录，这个目录用作存放首页组件模块的目录，因为我们最终要实现组件化开发。这样，当你完成上面的步骤后，你的项目看上去应该是这样的

3.安装npm依赖项,依次执行以下命令行

npm install\
  webpack webpack-dev-server\
  npm vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api\
  npm babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015\
  npm babel-runtime@5\
  npm --save-dev

npm install vue --save

如果出现这个错误，If you need help, you may report this error at:，把package.json里面的name改为webpacktest，重新执行npm install vue --save就ok了

这个时候，你的package.json文件看起来应该是这样的：

4.安装完了依赖，编辑以下文件并保存到相应位置：

（1）index.html文件：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>首页</title>
    </head>
    <body>
        <!-- vue的组件以自定义标签的形式使用 -->
        <favlist></favlist>
    </body>
</html>

（2）index.js文件：

import Vue from 'Vue'
import Favlist from './components/Favlist'

new Vue({
    el: 'body',
    components: { Favlist }
})

（3）在components目录下新建一个 Favlist.vue 文件，作为我们的第一个组件：

<template>
    <div v-for="n in 10">div</div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello World!'
            }
        }
    }
</script>

<style>
    html{
        background: red;
    }
</style>

要看懂上面的代码，你需要了解vue.js，假如你看不懂也没关系，我们首先在index.html中使用了自定义标签（即组件），然后在index.js中引入了Vue和我们的Favlist.vue组件，Favlist.vue文件中，我们使用了基本的vue组件语法，最后，我们希望它运行起来，这个时候，我们就需要webpack了。

在项目目录下新建 build 目录，用来存放我们的构建相关的代码文件等，然后在build目录下新建 webpack.config.js 这是我们的webpack配置文件，webpack需要通过读取你的配置，进行相应的操作，类似于gulpfile.js或者gruntfile.js等。

webpack.config.js

// nodejs 中的path模块
var path = require('path');

module.exports = {
    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
    entry: path.resolve(__dirname, '../app/index/index.js'),
    // 输出配置
    output: {
        // 输出路径是 myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: 'static/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    module: {
        
        loaders: [
            // 使用vue-loader 加载 .vue 结尾的文件
            {
                test: /\.vue$/, 
                loader: 'vue'   
            }
        ]
    }
}

上例中，相信你已经看懂了我的配置，入口文件是index.js文件，配置了相应输出，然后使用 vue-loader 去加载 .vue 结尾的文件，接下来我们就可以构建项目了，我们可以在命令行中执行：

webpack --display-modules --display-chunks --config build/webpack.config.js

通过webpack命令，并且通过 –config 选项指定了我们配置文件的位置是 ‘build/webpack.config.js’，并通过 –display-modules 和 –display-chunks 选项显示相应的信息。如果你执行上面的命令，可能得到下图的错误：

错误提示我们应该选择合适的loader去加载这个 ‘./app/index/index.js’ 这个文件，并且说不期望index.js文件中的标识符（Unexpected token），这是因为我们使用了ES6的语法 import 语句，所以我们要使用 babel-loader 去加载我们的js文件，在配置文件中添加一个loaders项目，如下：

转载于:https://www.cnblogs.com/summerXll/p/6532961.html