（一）vue安装

Vue项目搭建与部署

最新推荐文章于 2025-06-24 19:23:07 发布

hsnii

最新推荐文章于 2025-06-24 19:23:07 发布

阅读量521

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/hsnii/article/details/79165178

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Vue CLI快速搭建项目，并配置常用依赖如Vue Router、Element UI等。此外还介绍了项目的打包部署流程及如何利用Git将项目上传至GitHub。

在node基础上安装

npm install -g vue-cli

测试vue是否已安装，和可用模板

vue list

安装webpack模板

vue init webpack name   >> 大型项目
vue init  webpack-simple name   >> 一般自用

看需要y/n

运行vue

npm run dev

各种依赖看需求

npm i vue-router -D         >> 路由
npm i style-loader css-loader file-loader -D        >> css.style.file
npm i less less-loader stylus stylus-loader -D      >> less styl
npm i element-ui -D         >> el  pcUI 
npm i mint-ui -D            >> mint 移动端UI
npm i  axios -D             >> axios 交互
npm i vue-resource  --save  >> 交互
npm i vuex -D               >> vuex
{mapAction  获取,mapGetters   获取}

npm i better-scroll -save       >> scroll
npm i vue-jsonp -s      >> jsonp

打包vue

把config--index.js----assetsPublicPath: './'  加个点就可以了
npm run build
ok，直接预览index.html

git

上传github，只需dist文件夹即可
git init    # 初始化
git add .   # 把所有内容添加到索引库中，注意后面有个点
git commit -m "注释内容" 
git remote add origin git@github.com:个人/项目.git 
git push -u origin master

webpack
{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
}