Vue 安裝

蔚落 2022-04-15 00:37 281阅读 0赞

1.打开命令行窗口，输入 (注：要使用npm命令需要安装nodejs)

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70][]

碰到checkPermissions Missing write access这类问题的，大多是因为安装过一次导致的

解决方案删除node\_modules文件夹

C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node\_modules

2.看下cnpm 版本

cnpm -v

![20181119160812947.png][]

之前安裝了 node.js,這裡有Node.js版本

3. cnpm可能不是最新的,可以先升級下 (因为安装Vue需要npm的版本大于3.0.0，所以我们要升级一下)  上面顯示版本可以不升級

cnpm install cnpm -g

升級結果如下 ,(升級后 版本和之前版本一致 )

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 1][]

4.安裝vue

cnpm install vue

![2018111916154388.png][]

5.安裝安装vue-cli,(Vue-cli是Vue的脚手架工具 ,主要作用：目录结构、本地调试、代码部署、热加载、单元测试)

cnpm install --global vue-cli

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 2][]

6.進入自己的Demo文件夾( cd 命令) ,這裡直接在C:\\Users\\Administrator下面創建 Vue項目

vue init webpack "workflow"

然後回車 輸入 相應的項目屬性/或者直接採用默認值一直回車,運行完后,會在C:\\Users\\Administrator創建一個workflow的文件下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 4][]

7.進入workflow文件夾 運行項目

cd workflow

cnpm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 5][]

8 環境基本配置成功,此時在瀏覽器輸入[http://localhost:8080, 顯示如下][http_localhost_8080_]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 6][]

參考 [https://blog.csdn.net/Small\_Lee/article/details/68062223][https_blog.csdn.net_Small_Lee_article_details_68062223]

9.如果运行不了 产生webpack-dev-server' 不是内部或外部命令，也不是可运行的程序异常

执行 npm install;

npm install;

10.如果 npm install也报错 npm ERR! Unexpected end of JSON input while parsing near '...d86f6b054106ab9e5","t'

强制清理，运行npm cache clean --force

npm cache clean --force

![2019032921555266.png][]

参考[https://blog.csdn.net/genius\_yym/article/details/84645915][https_blog.csdn.net_genius_yym_article_details_84645915]

直接执行 npm cache clean --force, 如果执行成功，再npm install即可。  
如果执行失败，请先升级npm，即npm i -g npm, 最后再执行npm cache clean --force, 最后再npm install.  
如果还执行失败，可能npm安装有问题，可以从第一项重装一次

如果出现

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.  
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver\_win32.zip  
Saving to file: C:\\Users\\Administrator\\AppData\\Local\\Temp\\2.46\\chromedriver\\chromedriver\_win32.zip

请手动下载 https://chromedriver.storage.googleapis.com/2.46/chromedriver\_win32.zip

然后解压放到C:\\Users\\Administrator\\AppData\\Local\\Temp\\2.46\\chromedriver\\

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]: /images/20220415/4a85c83a2e2241a5b20250098a3540dd.png
[20181119160812947.png]: /images/20220415/e39a02b1c11045d292ad8bb8e1397fee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 1]: /images/20220415/b1f02778d39c4fb496e561b1bc2ae5e0.png
[2018111916154388.png]: /images/20220415/5e16870b857a41699d3b5a6e75ed3eec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 2]: /images/20220415/038dd64f24e2407ea6be01ce1904e83e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 3]: /images/20220415/e4317f77eab64fe78f58a710328635e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 4]: /images/20220415/c65840f652524ae4aec89b33eb0a90d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 5]: /images/20220415/b03ab9c5a1544224ba7716d45cfb46a5.png
[http_localhost_8080_]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 6]: /images/20220415/56145e72d9a24feb96733a64a9960136.png
[https_blog.csdn.net_Small_Lee_article_details_68062223]: https://blog.csdn.net/Small_Lee/article/details/68062223
[2019032921555266.png]: /images/20220415/38492a2fe1f444f49f0f2a30a0237910.png
[https_blog.csdn.net_genius_yym_article_details_84645915]: https://blog.csdn.net/genius_yym/article/details/84645915