预装

install nodejs
install npm
install vue
install vue-cli
isntall webpack

以上所需要的工具须全部安装。

说明

本 demo 采用 vue 脚手架 vue-cli 初始化项目。

Begin

$ vue init webpack test-demo

// 这里应注意：webpack可以替换为github某仓库，不是非得为webpack
// test-demo为所创建的文件夹名称， 后面可以重新指定项目名称
// 若需要使用Vue1.x，则使用vue init wbpack#1.0 test-demo

// 具体配置如下（完全可以按照自己的意愿进行配置，可直接回车）：

? Project name (test-demo)
? Project name test-demo
? Project description (A Vue.js project) Just a test demo.
? Project description Just a test demo.
? Author (johnniang <1340692778@qq.com>)
? Author johnniang <1340692778@qq.com>
? Vue build standalone
? Install vue-router? (Y/n) Y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? (Y/n) n
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No

        vue-cli · Generated "test-demo".

        To get started:

            cd test-demo
            npm install
            npm run dev

        Documentation can be found at https://vuejs-templates.github.io/webpack

根据末尾的提示安装依赖

$ cd test-dmeo
$ npm install    // 这里将会花很长的时间

...

$ npm run dev    // 会自动打开浏览器

至此，vuejs 项目可以正常打开。

那么还没完...

这仅仅是初始化架子，对于内部的某些配置还需要我们进行自定义初始化。

Follow

可能会在项目中安装 router、axios、sass-loader、style-loader、css-loader 等等所需要用到的工具。

每安装一个工具，在根目录中的 package.json 中就会添加相应的工具的名称及版本。

$ npm i axios -S    // 由于只是本项目中使用，所以使用-S来安装需要的工具，若仅仅是开发中使用的工具，则使用-D。
$ npm i vue-router -S

$ npm i node-sass -D
$ npm i sass-loader style-loader css-loader -D

到这里并没有完，还需要在 webpack 中配置相应的规则，否则 webpack 是无法解析 scss 语法以及 css 样式的。

Config Webpack

打开 build/webpack.base.config.js，然后将 module 替换为：

module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            }, {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ],
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [resolve('src'), resolve('test')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
}

有关路径问题：

在 resolve 节点中的 alias 可以配置路径的别名

如：

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),
          'page': path.resolve(__dirname, '../src/page'),
          'api': path.resolve(__dirname, '../src/api'),
          'utils': path.resolve(__dirname, '../src/utils'),
          'store': path.resolve(__dirname, '../src/store'),
          'router': path.resolve(__dirname, '../src/router'),
          'styles': path.resolve(__dirname, '../src/styles'),
          'static': path.resolve(__dirname, '../static')
        }
}

End

有关 Vuejs 项目的基本搭建基本到此结束，其余的配置还需要在项目开发中不断的修改或增添。

关于期间选择了 ESlint，这个工具建议都安装上，不管它是不是很烦人，但是规范代码还是有必要的。

本文由 johnniang 创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 6,2019

Vuejs项目初始化

预装

说明

Begin

Next

Follow

Config Webpack

有关路径问题：

End