基于webpack创建vue项目入门

字数 832阅读 82

一.安装node.js

1.去node官网https://nodejs.org/en/download/下载自己电脑适合的版本

2.安装很简单,一直下一步直到完成。打开命令行工具,输入node -v,如下图,出现版本号说明成功安装。

但是建议安装淘宝镜像,速度快一些,命令行输入npm install -g cnpm --registry='https://registry.npm.taobao.org'

二.安装webpack

命令行工具输入:npm install webpack -g,安装完后输入:webpack -v,出现版本号则成功

三.安装vue-cli

全局安装vue脚手架,命令行工具输入:npm install vue-cli -g,安装完后输入vue -V(此处必须大写“V”),出现版本号,则成功

四.创建vue项目

1.进入放项目的文件夹,打开命令行工具,输入:vue init webpack mysite(其中webpack是模板名称),会在当前目录下生成一个mysite项目文件夹

2.进入项目文件:cd mysite,安装项目依赖:npm install(如果失败,则用镜像:cnpm install)

3.安装vue路由模块vue-router和网络请求模块vue-resource:cnpm install vue-router vue-resource --save

4.启动项目npm run dev,默认会直接打开一个页面,或者在浏览器中输入http://localhost:8080,效果如下

5.服务启动的默认端口是8080,如果此端口被其他程序占用,加载不出来页面,则修改项目中的配置文件config>index.js

将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径

6.整个项目的结构如下图

bulid目录是webpack相关配置文件,已配置好,一般不需要修改

config是vue项目的基本配置文件,配置端口,打包输出等

node_modules是项目中安装的依赖模块

src项目核心文件,我们自己写的代码都放在这里

>>assets静态资源,如css,less,sass,一些外部的js文件以及图片等

>>components公共组件

>>router路由,配置项目路由

>>App.vue根组件

>>main.js入口文件

static静态资源

test测试文件夹

五.打包上线

项目开发完成后,在命令行中输入npm run build进行打包,完成后会在项目目录下生成dist文件夹,如果文件路径修改过了,可以本地直接查看。项目上线时,将dist文件夹放到服务器即可

其他

1.项目中使用sass

项目目录下打开命令行工具,输入:cnpm install node-sass  --save

继续输入:cnpm install--save-dev sass-loader style-loader css-loader

打开webpack.base.config.js在loaders里面加上下边的代码(注意:此方法适用vue2.0版本)

{

test: /\.scss$/,

loaders: ["style", "css", "sass"]

}

如果需要在vue文件里使用sass,则需要

<style lang="scss"></style>  /*使用scss语法*/

<style lang="sass"></style>  /*使用sass语法*/

推荐阅读更多精彩内容