vue项目的运行流程

Posted 2021-03-06 yztdd99

一   安装node环境:
1 vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功;

 

1.1 可以node.js官网,下载解压以后安装;

 

        1.2 国内安装可能比较慢,因此,推荐使用淘宝镜像,淘宝的cnpm命令管理工具可以代替默认的npm管理工具；

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
        

2 安装好以后,打开命令框,输入"node -v" 查看环境是否安装成功;

node -v

node -v以后显示了版本号,则安装成功

 

二   安装vue-cli
        

1 安装完npm镜像后，开始安装全局vue-cli脚手架，之所以要用vue-cli，是应为这个工具能帮我们搭建好我们需要的模板框架，比较简单。方法：cnpm install -g vue-cli,回车

cnpm install -g vue-cli,
        2 安装好以后,命令框npm -v ,检测是否安装成功

npm -v

显示了版本号,则安装成功

三  创建项目
        1 创建项目

进入你要存放项目的文件夹,命令框输入一下命令

vue init webpack myvuepro
        其中: init表示初始化;webpack:安装包;myvuepro表示要创建项目的文件夹名字

        意思是初始化一个名为myvuepro的项目

        

        

安装完以后,由于个文件是需要相互依赖的,一般需要安装依赖文件

1)进入项目文件夹

cd myvuepro (项目名)
2)输入

npm install
四  运行项目
进入项目目录,命令框输入命令: 

npm run dev
这样项目就能运行了