响应式科技公司网站模板下载,移动电商网站开发需求文档,php图片展示网站,泰安公司做网站一.构建vue.js项目 1. 安装node https://nodejs.org/en/ 下载完成后#xff0c;下一步–下一步–安装完成
验证node是否安装成功:
打开命令行(windows)或终端(mac),在命令行(终端)中输入#xff1a;
node -v 如果提示出版本信息则说明node安装成功
npm -v 如果提示出…一.构建vue.js项目 1. 安装node https://nodejs.org/en/ 下载完成后下一步–下一步–安装完成
验证node是否安装成功:
打开命令行(windows)或终端(mac),在命令行(终端)中输入
node -v 如果提示出版本信息则说明node安装成功
npm -v 如果提示出版本信息则说明npm安装成功2. 安装vue脚手架: vue-cli sudo npm install vue-cli -g (-g全局安装全局安装即就将当前的工具安装在了node的安装目录下)
验证vue-cli是否安装成功:
在终端输入vue -V 如果提示出版本信息则说明vue-cli安装成功3. 创建项目 新建一个存放项目的文件夹在该文件夹下打开终端 通过下面的简单的Linux命令进入到指定的文件夹 ls 列出当前所在目录下的所有文件及文件夹 cd xxx 进入到当前目录下的指定的文件夹 cd …返回上一级目录 在指定文件夹下打开终端后在终端中输入 sudo vue init webpack my-project (webpack是官方模版,my-project是自定义的项目名称) 4.下载安装项目依赖 如果在拉取模版时没有下载安装依赖则需要执行如下操作 1进入项目所在的项目文件夹 cd my-project 2通过下面的命令安装依赖 sudo cnpm install 5.运行项目 在项目文件夹下打开终端,运行下面的命令 npm run dev
**自动打开浏览器问题**
在根目录下找到config文件下的index.js文件
找到开发环境下的autoOpenBrowser改为true就可以了 二.项目实战–准备工作
需求分析项目资源准备(图片/图标字体制作IcoMoon)项目目录设计mock数据准备css初始化 5.1 在static下创建css文件夹,添加reset.css文件 参考: 1.Eric Meyer’s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset) 2.http://cssreset.com 5.2 在index.html文件中,用标签引入reset.css移动端视口设置(移动端项目需要设置) 在index.html文件中,通过标签设置如下:
meta nameviewportcontentwidthdevice-width,initial-scale1.0,maximum-scale1.0,minimum-scale1.0,user-scalableno在VSCode中添加.vue模版 三.项目实战–页面骨架开发划分模块拆分组件
