vue - vue项目的搭建以及初始化

心已赠人 2021-09-20 13:54 597阅读 0赞

## 一、项目的搭建 ##

*  首先，检查一下之前是否已经安装了脚手架：
    
     *  可以通过 `vue-V`来检查  
        ![在这里插入图片描述][20190628101209694.png]
 *  若是没有安装，则先安装脚手架
    
        npm install -g vue-cli 
        	cnpm install -g vue-cli    //淘宝镜像安装
 *  安装完成后，进入想要安装的文件夹开始创建项目
    
        vue init webpack 项目名称
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]
 *  安装完成后多出这些文件夹以及文件：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]
 *  各个文件的用途：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]

## 二、项目的初始化 ##

**ps：根据自己的需要安装对应的包**

#### 1. 安装依赖包 ####

*  请求方法axios：
    
        npm install axios
            或者
            cnpm install axios  	(淘宝镜像的方式)
 *  状态管理vuex
    
        npm install vuex --save
 *  如果是用less来写样式就安装less编译
    
        npm install less-loader  --save -dev
         	或者
         	npm install less-loader --save
 *  如果是用sass来写样式就安装sass编译
    
        npm install node-sass --save-dev
        	npm install --save-dev sass-loader 
        	或者
        	npm install --save-dev node-sass
 *  使用到的其他ui框架，可以参照对应的官网进行安装使用

#### 2. 在main.js文件进入使用的依赖包 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]

#### 3. 新增文件夹存放对应的文件 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]

#### 4. 使用glup编译样式使之能兼容多种浏览器 ####

**在这里我只列举出less的编译，sass的编译也类似**

*  在项目下面新建一个gulpfile.js文件‘’  
    ![在这里插入图片描述][20190628104049514.png]
 *  写入一下的代码：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 5]

*  **注意，在这之前要先安装gulp以及gulp-autoprefixer**
    
        npm install gulp@3.9.1 -g    全局安裝
        	npm install gulp-less --save-dev
        	npm install gulp-autoprefixer --save-dev
    
    使用 `gulp -v`来检查是否安装成功  
    注意局部的gulp跟全局的gulp版本一定要一致
    
        npm install  --save gulp@3.9.1    局部安裝
    
    ![在这里插入图片描述][20190628104901506.png]
 *  安装完成启动即可，每当保存一次less文件，gulp就会自动编译  
    ![在这里插入图片描述][20190628105047266.png]  
    编译之前：  
    ![在这里插入图片描述][20190628111030250.png]  
    编译之后：  
    ![在这里插入图片描述][20190628111010373.png]

#### 5. 初始化样式文件 ####

html, body, div, span,  h1, h2,  p,  a, i, ul, li, textarea,input { margin:0; padding:0;  }
    	 i {font-style:normal;}
    	body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma';  color: #333; box-sizing: border-box;}
    	h1, h2{ font-size: 100%; font-weight: normal; }
    	button,input,select,textarea{font-size:100%;}
    	img{border:0;}
    	a,
    	img {
    	    -webkit-touch-callout: none
    	}
    	a,
    	a:active,
    	a:focus,
    	a:hover,
    	a:visited {text-decoration: none}
    	input[type=password],
    	input[type=text],
    	textarea {
    	    resize: none;
    	    outline: 0;
    	    -webkit-appearance: none;
    	    white-space: pre-wrap;
    	    word-wrap: break-word;
    	    background: #fff
    	}
    	ul { list-style: none; }
    	:focus{ outline:none;}
    	.clearfix{ clear: both; content: ""; display: block; overflow: hidden }
    	.clear{clear: both;}
    	.fl{ float: left; }
    	.fr{float: right;}
    	input{outline: 0 none;border: 0 none;}

**根据自己的需求进行修改**

#### 6. 如果是移动端（app），可以使用.px2rem进行适配 ####

*  在公共的js文件夹里面新建 hotcss.js 文件，并写入一下代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 8]

*  在less文件夹下面新建一个 px2rem.less 文件，写入一下代码  
    ![在这里插入图片描述][20190628110452344.png]

@designWidth:750;   //适配的屏幕宽度
       
       //属性名，值
       .px2rem(@name, @length){
           @{name}: unit(@length*320/@designWidth/20 , rem);
           // @{name}: unit(@length , px);
       
           // @{name}: unit(@length , px);
       }

*  在其他的样式文件（其他的样式文件都写在style文件夹下面）中直接引入 px2rem.less 文件即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 9]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 10]

[20190628101209694.png]: /images/20210812/f01f58bf62f648a384d9a19e03c4dcd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210812/c0b28cccd06b4424a2536c078871568d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: /images/20210812/4d2d1497ee024eea8cc87c38c39b11e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]: /images/20210812/c5023f4627044db6a3cef503b7fa7081.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]: /images/20210812/e134a9a8fba94cdeab6db9e2a33c2195.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]: /images/20210812/279dcf6166fc4a2796f67afde175c290.png
[20190628104049514.png]: /images/20210812/ecffe8d93eb642d9ba08fbe2e7cea732.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 5]: /images/20210812/f37600f5b96f458d895cd5834ddb9dd6.png
[20190628104901506.png]: /images/20210812/f2bc96ae43f94a908d4f068e81088b02.png
[20190628105047266.png]: /images/20210812/fc143ed94b9944e880aa556db27c1fdb.png
[20190628111030250.png]: /images/20210812/45af4d19d8e346799f1591c5e5e37d60.png
[20190628111010373.png]: /images/20210812/045da01e73d1441e932a21aef4ce4501.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 6]: /images/20210812/46267c19238d43d9befe5a7a0ebde86c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 7]: /images/20210812/2e43719653b342d6b5fa6676156b2490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 8]: /images/20210812/b6cb22931edd46179df061d62e9df7a2.png
[20190628110452344.png]: /images/20210812/756a8f5612cf4d5fbf27bd533e4aa48a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 9]: /images/20210812/ff53b27b871b4fce9e3c977636c0339c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 10]: /images/20210812/d47f5453e7c7468f9155a4d3f75bc6c7.png